formatting

packages/builder/src/components/common/ActionButton.svelte

@@ -30,8 +30,8 @@
 
   .alert {
     color: white;
-    background: #E26D69;
-    border: solid 1px #E26D69;
+    background: #e26d69;
+    border: solid 1px #e26d69;
   }
 
   .cancel {

packages/builder/src/components/common/Input.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let textAlign = "left"
@@ -7,22 +7,30 @@
   export let placeholder = ""
   export let suffix = ""
   export let onChange = val => {}
-  
+
   let centerPlaceholder = textAlign === "center"
 
   let style = buildStyle({ width, textAlign })
-  
+
   function handleChange(val) {
     value = val
     let _value = value !== "auto" ? value + suffix : value
     onChange(_value)
   }
 
-  $: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
-  
+  $: displayValue =
+    suffix && value && value.endsWith(suffix)
+      ? value.replace(new RegExp(`${suffix}$`), "")
+      : value || ""
 </script>
 
-<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
+<input
+  class:centerPlaceholder
+  type="text"
+  value={displayValue}
+  {placeholder}
+  {style}
+  on:change={e => handleChange(e.target.value)} />
 
 <style>
   input {
@@ -43,7 +51,7 @@
     outline: none;
   }
 
-  input::placeholder {    
+  input::placeholder {
     text-align: left;
   }
 

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -11,9 +11,11 @@
 
   function handleChange(val, idx) {
     value.splice(idx, 1, val !== "auto" ? val + suffix : val)
-    
+
     value = value
-    let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
+    let _value = value.map(v =>
+      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+    )
     onChange(_value)
   }
 
@@ -44,5 +46,4 @@
   .inputs-group {
     flex: 1;
   }
-
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte

@@ -88,7 +88,7 @@
       </tbody>
     </table>
     <footer>
-        <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
+      <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
     </footer>
   </div>
 {:else}
@@ -160,6 +160,4 @@
     display: flex;
     justify-content: flex-end;
   }
-
-
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte

@@ -43,11 +43,11 @@
   <i class="ri-eye-line button--toggled" />
   <h3 class="budibase__title--3">Create / Edit View</h3>
 </div>
-  <form on:submit|preventDefault class="uk-form-stacked root">
-    {#if $store.errors && $store.errors.length > 0}
-      <ErrorsBox errors={$store.errors} />
-    {/if}
-    <div class="main">
+<form on:submit|preventDefault class="uk-form-stacked root">
+  {#if $store.errors && $store.errors.length > 0}
+    <ErrorsBox errors={$store.errors} />
+  {/if}
+  <div class="main">
     <div class="uk-grid-small" uk-grid>
       <div class="uk-width-1-2@s">
         <Textbox bind:text={view.name} label="Name" />
@@ -108,7 +108,7 @@
   .main {
     margin: 20px 40px 0px 40px;
   }
-  
+
   .code-snippets {
     margin: 20px 0px 20px 0px;
   }

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

@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let text = ""
   export let icon = ""
@@ -8,19 +8,24 @@
   export let selected = false
   export let fontWeight = ""
 
-  $: style = buildStyle({padding, fontWeight})
+  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
-<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
+<div
+  class="flatbutton"
+  {style}
+  class:selected
+  on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
-    <span>{@html text}</span>
+    <span>
+      {@html text}
+    </span>
   {/if}
 </div>
 
-
 <style>
   .flatbutton {
     cursor: pointer;
@@ -41,8 +46,8 @@
     background: var(--ink-light);
     color: #ffffff;
   }
-  
-  i{
+
+  i {
     font-size: 20px;
   }
 </style>

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

@@ -28,10 +28,8 @@
     onChange(val)
   }
 
-
   const checkSelected = val =>
     isMultiSelect ? value.includes(val) : value === val
-
 </script>
 
 <div class="flatbutton-group">

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

@@ -1,6 +1,6 @@
 <script>
   import { onMount, beforeUpdate } from "svelte"
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
   export let styleBindingProperty
@@ -214,10 +214,10 @@
     height: auto;
     padding: 5px 0px;
     cursor: pointer;
-    padding-left: 10px
+    padding-left: 10px;
   }
 
   li:hover {
-    background-color:#e6e6e6
+    background-color: #e6e6e6;
   }
 </style>