Formatting.

packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte

@@ -60,9 +60,7 @@
           <span class="binding__label">{binding.label}</span>
           <span class="binding__type">{binding.type}</span>
           <br />
-            <div class="binding__description">
-                {binding.description || ''}
-            </div>
+          <div class="binding__description">{binding.description || ''}</div>
         </div>
       {/each}
     {/each}
@@ -95,7 +93,6 @@
   </div>
 </div>
 
-
 <style>
   .container {
     height: 40vh;
@@ -186,5 +183,4 @@
     color: var(--red);
     text-decoration: underline;
   }
-  </style>
-  
+</style>

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>

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} />

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>
@@ -73,7 +77,13 @@
   </div>
   {#if componentDefinition?.transitionable}
     <div class="transitions">
-       <Select value={componentInstance._transition} on:change={event => onUpdateTransition(event.target.value)} name="transition" label="Transition" secondary thin>
+      <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}

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,10 +56,10 @@
   }
 
   function handleDndConsider(e) {
-        actions = e.detail.items;
+    actions = e.detail.items
   }
   function handleDndFinalize(e) {
-        actions = e.detail.items;
+    actions = e.detail.items
   }
 </script>
 
@@ -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}

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

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}

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>