From 3947044014e9d87d455c8a3c18d27adabcadab3e Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 10 Mar 2021 17:56:16 +0000
Subject: [PATCH] Formatting.

---
 .../SetupPanel/AutomationBindingPanel.svelte  | 356 +++++++++---------
 .../SetupPanel/AutomationBlockSetup.svelte    |   6 +-
 .../automation/SetupPanel/RowSelector.svelte  |   4 +-
 .../design/PropertiesPanel/DesignView.svelte  |  28 +-
 .../EventsEditor/EventEditor.svelte           |  30 +-
 .../PropertiesPanel/SettingsView.svelte       |   2 +-
 .../settings/ThemeEditorDropdown.svelte       |   2 +-
 .../client/src/components/Component.svelte    |   2 +-
 .../standard-components/src/Container.svelte  |  52 ++-
 .../src/grid/Component.svelte                 |   4 +-
 10 files changed, 263 insertions(+), 223 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
index a05d5b9996..bda233f9f2 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -1,190 +1,186 @@
 <script>
-    import groupBy from "lodash/fp/groupBy"
-    import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
-    import { createEventDispatcher } from "svelte"
-    import { isValid } from "@budibase/string-templates"
-    import { handlebarsCompletions } from "constants/completions"
-  
-    const dispatch = createEventDispatcher()
-  
-    export let value = ""
-    export let bindingDrawer
-    export let bindableProperties = []
-  
-    let originalValue = value
-    let helpers = handlebarsCompletions()
-    let getCaretPosition
-    let search = ""
-    let validity = true
-  
-    $: categories = Object.entries(groupBy("category", bindableProperties))
-    $: value && checkValid()
-    $: dispatch("update", value)
-    $: searchRgx = new RegExp(search, "ig")
-  
-    function checkValid() {
-        validity = isValid(value)
-    }
-  
-    function addToText(binding) {
-        const position = getCaretPosition()
-        const toAdd = `{{ ${binding.path} }}`
-        if (position.start) {
-        value =
-            value.substring(0, position.start) +
-            toAdd +
-            value.substring(position.end, value.length)
-        } else {
-        value += toAdd
-        }
-    }
-    export function cancel() {
-      dispatch("update", originalValue)
-      bindingDrawer.close()
+  import groupBy from "lodash/fp/groupBy"
+  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { isValid } from "@budibase/string-templates"
+  import { handlebarsCompletions } from "constants/completions"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let bindingDrawer
+  export let bindableProperties = []
+
+  let originalValue = value
+  let helpers = handlebarsCompletions()
+  let getCaretPosition
+  let search = ""
+  let validity = true
+
+  $: categories = Object.entries(groupBy("category", bindableProperties))
+  $: value && checkValid()
+  $: dispatch("update", value)
+  $: searchRgx = new RegExp(search, "ig")
+
+  function checkValid() {
+    validity = isValid(value)
+  }
+
+  function addToText(binding) {
+    const position = getCaretPosition()
+    const toAdd = `{{ ${binding.path} }}`
+    if (position.start) {
+      value =
+        value.substring(0, position.start) +
+        toAdd +
+        value.substring(position.end, value.length)
+    } else {
+      value += toAdd
     }
+  }
+  export function cancel() {
+    dispatch("update", originalValue)
+    bindingDrawer.close()
+  }
 </script>
 
 <div class="container">
-    <div class="list">
-        <Heading small>Available bindings</Heading>
-        <Spacer medium />
-        <Input extraThin placeholder="Search" bind:value={search} />
-        <Spacer medium />
-        {#each categories as [categoryName, bindings]}
-        <Heading extraSmall>{categoryName}</Heading>
-        <Spacer extraSmall />
-        {#each bindableProperties.filter(binding =>
-            binding.label.match(searchRgx)
-        ) as binding}
-            <div class="binding" on:click={() => addToText(binding)}>
-            <span class="binding__label">{binding.label}</span>
-            <span class="binding__type">{binding.type}</span>
-            <br />
-            <div class="binding__description">
-                {binding.description || ''}
-            </div>
-            </div>
-        {/each}
-        {/each}
-        <Heading extraSmall>Helpers</Heading>
-        <Spacer extraSmall />
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-            <div class="binding" on:click={() => addToText(helper)}>
-                <span class="binding__label">{helper.label}</span>
-                <br />
-                <div class="binding__description">
-                {@html helper.description || ''}
-                </div>
-                <pre>{helper.example || ''}</pre>
-            </div>
-        {/each}
-    </div>
-    <div class="text">
-        <TextArea
-        bind:getCaretPosition
-        thin
-        bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
-        {#if !validity}
-        <p class="syntax-error">
-            Current Handlebars syntax is invalid, please check the guide
-            <a href="https://handlebarsjs.com/guide/">here</a>
-            for more details.
-        </p>
-        {/if}
-    </div>
+  <div class="list">
+    <Heading small>Available bindings</Heading>
+    <Spacer medium />
+    <Input extraThin placeholder="Search" bind:value={search} />
+    <Spacer medium />
+    {#each categories as [categoryName, bindings]}
+      <Heading extraSmall>{categoryName}</Heading>
+      <Spacer extraSmall />
+      {#each bindableProperties.filter(binding =>
+        binding.label.match(searchRgx)
+      ) as binding}
+        <div class="binding" on:click={() => addToText(binding)}>
+          <span class="binding__label">{binding.label}</span>
+          <span class="binding__type">{binding.type}</span>
+          <br />
+          <div class="binding__description">{binding.description || ''}</div>
+        </div>
+      {/each}
+    {/each}
+    <Heading extraSmall>Helpers</Heading>
+    <Spacer extraSmall />
+    {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+      <div class="binding" on:click={() => addToText(helper)}>
+        <span class="binding__label">{helper.label}</span>
+        <br />
+        <div class="binding__description">
+          {@html helper.description || ''}
+        </div>
+        <pre>{helper.example || ''}</pre>
+      </div>
+    {/each}
+  </div>
+  <div class="text">
+    <TextArea
+      bind:getCaretPosition
+      thin
+      bind:value
+      placeholder="Add text, or click the objects on the left to add them to the textbox." />
+    {#if !validity}
+      <p class="syntax-error">
+        Current Handlebars syntax is invalid, please check the guide
+        <a href="https://handlebarsjs.com/guide/">here</a>
+        for more details.
+      </p>
+    {/if}
+  </div>
 </div>
 
-
 <style>
-    .container {
-      height: 40vh;
-      overflow-y: auto;
-      display: grid;
-      grid-template-columns: 280px 1fr;
-    }
-  
-    .list {
-        border-right: var(--border-light);
-        padding: var(--spacing-l);
-        overflow: auto;
-    }
-    .list {
-        border-right: var(--border-light);
-        padding: var(--spacing-l);
-        overflow: auto;
-    }
+  .container {
+    height: 40vh;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: 280px 1fr;
+  }
 
-    .list::-webkit-scrollbar {
-        display: none;
-    }
+  .list {
+    border-right: var(--border-light);
+    padding: var(--spacing-l);
+    overflow: auto;
+  }
+  .list {
+    border-right: var(--border-light);
+    padding: var(--spacing-l);
+    overflow: auto;
+  }
 
-    .text {
-        padding: var(--spacing-l);
-        font-family: var(--font-sans);
-    }
-    .text :global(textarea) {
-        min-height: 100px;
-    }
-    .text :global(p) {
-        margin: 0;
-    }
-  
-    .binding {
-      font-size: 12px;
-      padding: var(--spacing-s);
-      border-radius: var(--border-radius-m);
-    }
-    .binding:hover {
-      background-color: var(--grey-2);
-      cursor: pointer;
-    }
-    .binding__label {
-      font-weight: 500;
-      text-transform: capitalize;
-    }
-    .binding__description {
-      color: var(--grey-8);
-      margin-top: 2px;
-      white-space: normal;
-    }
-  
-    pre {
-      white-space: normal;
-    }
-  
-    .binding__type {
-      font-family: monospace;
-      background-color: var(--grey-2);
-      border-radius: var(--border-radius-m);
-      padding: 2px;
-      margin-left: 2px;
-      font-weight: 500;
-    }
-  
-    .editor {
-      padding-left: var(--spacing-l);
-    }
-    .editor :global(textarea) {
-      min-height: 60px;
-    }
-  
-    .controls {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-gap: var(--spacing-l);
-      align-items: center;
-      margin-top: var(--spacing-m);
-    }
-  
-    .syntax-error {
-      color: var(--red);
-      font-size: 12px;
-    }
-  
-    .syntax-error a {
-      color: var(--red);
-      text-decoration: underline;
-    }
-  </style>
-  
\ No newline at end of file
+  .list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .text {
+    padding: var(--spacing-l);
+    font-family: var(--font-sans);
+  }
+  .text :global(textarea) {
+    min-height: 100px;
+  }
+  .text :global(p) {
+    margin: 0;
+  }
+
+  .binding {
+    font-size: 12px;
+    padding: var(--spacing-s);
+    border-radius: var(--border-radius-m);
+  }
+  .binding:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+  .binding__label {
+    font-weight: 500;
+    text-transform: capitalize;
+  }
+  .binding__description {
+    color: var(--grey-8);
+    margin-top: 2px;
+    white-space: normal;
+  }
+
+  pre {
+    white-space: normal;
+  }
+
+  .binding__type {
+    font-family: monospace;
+    background-color: var(--grey-2);
+    border-radius: var(--border-radius-m);
+    padding: 2px;
+    margin-left: 2px;
+    font-weight: 500;
+  }
+
+  .editor {
+    padding-left: var(--spacing-l);
+  }
+  .editor :global(textarea) {
+    min-height: 60px;
+  }
+
+  .controls {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+    margin-top: var(--spacing-m);
+  }
+
+  .syntax-error {
+    color: var(--red);
+    font-size: 12px;
+  }
+
+  .syntax-error a {
+    color: var(--red);
+    text-decoration: underline;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 2cd00d9ec0..1e2ee46cad 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -6,7 +6,7 @@
   import { automationStore } from "builderStore"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
   import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
+  import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
 
   export let block
   export let webhookModal
@@ -70,7 +70,7 @@
         type={'email'}
         extraThin
         value={block.inputs[key]}
-        on:change={e => block.inputs[key] = e.detail}
+        on:change={e => (block.inputs[key] = e.detail)}
         {bindings} />
     {:else if value.customType === 'table'}
       <TableSelector bind:value={block.inputs[key]} />
@@ -86,7 +86,7 @@
         type={value.customType}
         extraThin
         value={block.inputs[key]}
-        on:change={e => block.inputs[key] = e.detail}
+        on:change={e => (block.inputs[key] = e.detail)}
         {bindings} />
     {/if}
   </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 4244a0bced..4fcdb6cd84 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -2,7 +2,7 @@
   import { backendUiStore } from "builderStore"
   import { Select } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
-  import AutomationBindingPanel from './AutomationBindingPanel.svelte'
+  import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
 
   export let value
   export let bindings
@@ -44,7 +44,7 @@
             panel={AutomationBindingPanel}
             extraThin
             value={value[field]}
-            on:change={e => value[field] = e.detail}
+            on:change={e => (value[field] = e.detail)}
             label={field}
             type="string"
             {bindings} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index 2a30d45eb3..cf1816dc62 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -25,10 +25,14 @@
   ]
 
   const transitions = [
-    'none', 'fade', 'blur', 'fly', 'scale' // slide is hidden because it does not seem to result in any effect
+    "none",
+    "fade",
+    "blur",
+    "fly",
+    "scale", // slide is hidden because it does not seem to result in any effect
   ]
 
-  const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('');
+  const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join("")
 
   $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
 </script>
@@ -72,13 +76,19 @@
     </div>
   </div>
   {#if componentDefinition?.transitionable}
-     <div class="transitions">
-       <Select value={componentInstance._transition} on:change={event => onUpdateTransition(event.target.value)} name="transition" label="Transition" secondary thin>
-         {#each transitions as transition}
-           <option value={transition}>{capitalize(transition)}</option>
-         {/each}
-       </Select>
-     </div>
+    <div class="transitions">
+      <Select
+        value={componentInstance._transition}
+        on:change={event => onUpdateTransition(event.target.value)}
+        name="transition"
+        label="Transition"
+        secondary
+        thin>
+        {#each transitions as transition}
+          <option value={transition}>{capitalize(transition)}</option>
+        {/each}
+      </Select>
+    </div>
   {/if}
 </div>
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 34e6cf1317..fce9911754 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,10 +1,10 @@
 <script>
-  import {flip} from "svelte/animate";
-  import {dndzone} from "svelte-dnd-action";
+  import { flip } from "svelte/animate"
+  import { dndzone } from "svelte-dnd-action"
   import { Button, DropdownMenu, Spacer } from "@budibase/bbui"
   import actionTypes from "./actions"
 
-  const flipDurationMs = 150;
+  const flipDurationMs = 150
 
   const EVENT_TYPE_KEY = "##eventHandlerType"
 
@@ -13,7 +13,7 @@
   // dndzone needs an id on the array items, so this adds some temporary ones.
   if (actions) {
     actions = actions.map((action, i) => {
-      return {...action, id: i}
+      return { ...action, id: i }
     })
   }
 
@@ -41,7 +41,7 @@
     const newAction = {
       parameters: {},
       [EVENT_TYPE_KEY]: actionType.name,
-      id: actions ? actions.length + 1 : 0
+      id: actions ? actions.length + 1 : 0,
     }
     if (!actions) {
       actions = []
@@ -56,11 +56,11 @@
   }
 
   function handleDndConsider(e) {
-        actions = e.detail.items;
-    }
-    function handleDndFinalize(e) {
-        actions = e.detail.items;
-    }
+    actions = e.detail.items
+  }
+  function handleDndFinalize(e) {
+    actions = e.detail.items
+  }
 </script>
 
 <div class="actions-container">
@@ -87,9 +87,15 @@
     </div>
 
     {#if actions && actions.length > 0}
-      <div class="action-dnd-container" use:dndzone={{items: actions, flipDurationMs, dropTargetStyle: { outline: 'none'}}} on:consider={handleDndConsider} on:finalize={handleDndFinalize}>
+      <div
+        class="action-dnd-container"
+        use:dndzone={{ items: actions, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
+        on:consider={handleDndConsider}
+        on:finalize={handleDndFinalize}>
         {#each actions as action, index (action.id)}
-          <div class="action-container" animate:flip={{duration: flipDurationMs}}>
+          <div
+            class="action-container"
+            animate:flip={{ duration: flipDurationMs }}>
             <div
               class="action-header"
               class:selected={action === selectedAction}
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 447a4f71fc..3cb2437e8e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -162,7 +162,7 @@
 
   {#if componentDefinition?.component?.endsWith('/fieldgroup')}
     <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
-      Update Form Fields 
+      Update Form Fields
     </Button>
   {/if}
 </div>
diff --git a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
index 64a431fc19..99e018843e 100644
--- a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
+++ b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
@@ -43,7 +43,7 @@
   .topnavitemright:hover i {
     color: var(--ink);
   }
-  
+
   .content {
     padding: var(--spacing-xl);
   }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 84c935026e..b32222ce2f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -41,7 +41,7 @@
     id,
     children: children.length,
     styles: { ...styles, id },
-    transition
+    transition,
   })
 
   // Gets the component constructor for the specified component
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 8f49ba0ca9..4134db5d64 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -8,55 +8,81 @@
 </script>
 
 {#if type === 'div'}
-  <div  in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <div
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </div>
 {:else if type === 'header'}
-  <header in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <header
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </header>
 {:else if type === 'main'}
-  <main in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <main
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </main>
 {:else if type === 'footer'}
-  <footer in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <footer
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </footer>
 {:else if type === 'aside'}
-  <aside in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <aside
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </aside>
 {:else if type === 'summary'}
-  <summary in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <summary
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </summary>
 {:else if type === 'details'}
-  <details in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <details
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </details>
 {:else if type === 'article'}
-  <article in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <article
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </article>
 {:else if type === 'nav'}
-  <nav in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <nav
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </nav>
 {:else if type === 'mark'}
-  <mark in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <mark
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </mark>
 {:else if type === 'figure'}
-  <figure in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <figure
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </figure>
 {:else if type === 'figcaption'}
-  <figcaption in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <figcaption
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </figcaption>
 {:else if type === 'paragraph'}
-  <p in:transition={{type: $component.transition}} use:styleable={$component.styles}>
+  <p
+    in:transition={{ type: $component.transition }}
+    use:styleable={$component.styles}>
     <slot />
   </p>
 {/if}
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index 99ce14cf89..49754a86a5 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -152,7 +152,9 @@
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
-            Delete {selectedRows.length} row(s)
+            Delete
+            {selectedRows.length}
+            row(s)
           </DeleteButton>
         {/if}
       </div>