formatting and lint

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

@@ -16,7 +16,7 @@
   import Portal from "./Portal.svelte"
 
   export let value = "#3ec1d3ff"
-  export let open = false;
+  export let open = false
   export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
   export let disableSwatches = false
   export let format = "hexa"
@@ -40,7 +40,7 @@
       getRecentColors()
     }
 
-    if(colorPicker) {
+    if (colorPicker) {
       colorPicker.focus()
     }
 
@@ -57,7 +57,7 @@
   }
 
   function handleEscape(e) {
-    if(open && e.key === "Escape") {
+    if (open && e.key === "Escape") {
       open = false
     }
   }
@@ -159,10 +159,8 @@
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
   $: selectedColorStyle = buildStyle({ background: value, border })
   $: shrink = swatches.length > 0
-  
 </script>
 
-
 <Portal>
   <div
     class="colorpicker-container"

packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte

@@ -38,7 +38,6 @@
     }
   })
 
-
   function openColorpicker(event) {
     if (colorPreview) {
       open = true
@@ -50,7 +49,7 @@
     dispatch("change", color.detail)
   }
 
-  $: if(open && colorPreview) {
+  $: if (open && colorPreview) {
     const {
       top: spaceAbove,
       width,
@@ -62,17 +61,17 @@
     const spaceBelow = window.innerHeight - bottom
     const previewCenter = previewWidth / 2
 
-    let y, x;
+    let y, x
 
-    if(spaceAbove > spaceBelow) {
+    if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
-      y = (window.innerHeight - spaceAbove)
+      y = window.innerHeight - spaceAbove
-    }else{
+    } else {
       positionSide = "top"
       y = bottom
     }
 
-    x = (left + previewCenter) - (pickerWidth / 2)
+    x = left + previewCenter - pickerWidth / 2
 
     dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
@@ -83,7 +82,6 @@
     [positionSide]: `${dimensions[positionSide]}px`,
     left: `${dimensions.left}px`,
   })
-  
 </script>
 
 <div class="color-preview-container">
@@ -110,8 +108,7 @@
         bind:pickerWidth
         bind:open
         {swatches}
-      {disableSwatches}
+        {disableSwatches} />
-       />
       <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
   {:else}

packages/builder/src/components/userInterface/Colorpicker/Portal.svelte

@@ -1,35 +1,35 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount } from "svelte"
 
-  export let target = document.body;
+  export let target = document.body
 
-  let targetEl;
+  let targetEl
-  let portal;
+  let portal
-  let componentInstance;
+  let componentInstance
 
   onMount(() => {
     if (typeof target === "string") {
-      targetEl = document.querySelector(target);
+      targetEl = document.querySelector(target)
       // Force exit
       if (targetEl === null) {
-        return () => {};
+        return () => {}
       }
     } else if (target instanceof HTMLElement) {
-      targetEl = target;
+      targetEl = target
     } else {
       throw new TypeError(
         `Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
-      );
+      )
     }
 
-    portal = document.createElement("div");
+    portal = document.createElement("div")
-    targetEl.appendChild(portal);
+    targetEl.appendChild(portal)
-    portal.appendChild(componentInstance);
+    portal.appendChild(componentInstance)
 
     return () => {
-      targetEl.removeChild(portal);
+      targetEl.removeChild(portal)
-    };
+    }
-  });
+  })
 </script>
 
 <div bind:this={componentInstance}>

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

@@ -99,9 +99,7 @@
     {selectedCategory} />
 
   {#if displayName}
-    <div class="instance-name">
+    <div class="instance-name">{componentInstance._instanceName}</div>
-      {componentInstance._instanceName}
-    </div>
   {/if}
 
   <div class="component-props-container">

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

@@ -1,9 +1,8 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
-
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
@@ -34,7 +33,6 @@
   ]
 
   $: propertyGroupNames = Object.keys(panelDefinition)
-  
 </script>
 
 <div class="design-view-container">
@@ -55,7 +53,7 @@
             {componentDefinition}
             {componentInstance}
             open={currentGroup === groupName}
-            on:open={() => currentGroup = groupName} />
+            on:open={() => (currentGroup = groupName)} />
         {/each}
       {:else}
         <div class="no-design">

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

@@ -13,13 +13,13 @@
   let selectMenu
   let icon
 
-  let selectAnchor = null;
+  let selectAnchor = null
-  let dimensions = {top: 0, bottom: 0, left: 0}
+  let dimensions = { top: 0, bottom: 0, left: 0 }
 
   let positionSide = "top"
   let maxHeight = 0
-  let scrollTop = 0;
+  let scrollTop = 0
-  let containerEl = null;
+  let containerEl = null
 
   const handleStyleBind = value =>
     !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
@@ -32,32 +32,35 @@
     return () => {
       select.removeEventListener("keydown", handleEnter)
     }
-
   })
 
   function handleEscape(e) {
-    if(open && e.key === "Escape") {
+    if (open && e.key === "Escape") {
       toggleSelect(false)
     }
   }
 
   function getDimensions() {
-    const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
+    const {
+      bottom,
+      top: spaceAbove,
+      left,
+    } = selectAnchor.getBoundingClientRect()
     const spaceBelow = window.innerHeight - bottom
 
-    let y;
+    let y
 
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
       maxHeight = spaceAbove - 20
-      y = (window.innerHeight - spaceAbove)
+      y = window.innerHeight - spaceAbove
     } else {
       positionSide = "top"
       y = bottom
       maxHeight = spaceBelow - 20
     }
 
-    dimensions = {[positionSide]: y, left}
+    dimensions = { [positionSide]: y, left }
   }
 
   function handleEnter(e) {
@@ -76,7 +79,6 @@
     open = isOpen
   }
 
-
   function handleClick(val) {
     value = val
     onChange(value)
@@ -86,7 +88,7 @@
     "max-height": `${maxHeight.toFixed(0)}px`,
     "transform-origin": `center ${positionSide}`,
     [positionSide]: `${dimensions[positionSide]}px`,
-    "left": `${dimensions.left.toFixed(0)}px`,
+    left: `${dimensions.left.toFixed(0)}px`,
   })
 
   $: isOptionsObject = options.every(o => typeof o === "object")
@@ -95,7 +97,7 @@
     ? options.find(o => o.value === value)
     : {}
 
-  $: if(open && selectMenu) {
+  $: if (open && selectMenu) {
     selectMenu.focus()
   }
 

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

@@ -13,7 +13,7 @@
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name} on:open show={open} >
+<DetailSummary {name} on:open show={open}>
   {#each properties as props}
     <PropertyControl
       label={props.label}

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -318,7 +318,7 @@ export default {
               { label: "Stripe Color", key: "stripeColor", control: Input },
               { label: "Border Color", key: "borderColor", control: Input },
               { label: "TH Color", key: "backgroundColor", control: Input },
-              { label: "TH Font Color", key: "color", control: Input }
+              { label: "TH Font Color", key: "color", control: Input },
             ],
           },
           children: [],
@@ -336,7 +336,7 @@ export default {
               properties: {
                 design: { ...all },
                 settings: [
-                  { label: "Model", key: "model", control: ModelSelect,},
+                  { label: "Model", key: "model", control: ModelSelect },
                 ],
               },
               template: {

packages/builder/src/pages/[application]/_reset.svelte

@@ -38,7 +38,9 @@
     if (!activeTopNav) return
     store.update(state => {
       if (!state.previousTopNavPath) state.previousTopNavPath = {}
-      state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
+      state.previousTopNavPath[
+        activeTopNav.path
+      ] = window.location.pathname.replace("/_builder", "")
       $goto(state.previousTopNavPath[path] || path)
       return state
     })

packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte

@@ -1,14 +1,15 @@
 <script>
-import { params } from "@sveltech/routify"
+  import { params } from "@sveltech/routify"
-import { backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
 
-if ($params.selectedModel) {
+  if ($params.selectedModel) {
-  const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
+    const model = $backendUiStore.models.find(
+      m => m._id === $params.selectedModel
+    )
     if (model) {
       backendUiStore.actions.models.select(model)
     }
-}
+  }
-
 </script>
 
 <slot />

packages/builder/src/pages/[application]/backend/model/_layout.svelte

@@ -10,7 +10,11 @@
   onMount(async () => {
     // navigate to first model in list, if not already selected
     // and this is the final url (i.e. no selectedModel)
-    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+    if (
+      !$leftover &&
+      $backendUiStore.models.length > 0 &&
+      (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
+    ) {
       $goto(`./${$backendUiStore.models[0]._id}`)
     }
   })

packages/builder/src/pages/[application]/backend/model/index.svelte

@@ -10,7 +10,11 @@
   onMount(async () => {
     // navigate to first model in list, if not already selected
     // and this is the final url (i.e. no selectedModel)
-    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+    if (
+      !$leftover &&
+      $backendUiStore.models.length > 0 &&
+      (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
+    ) {
       // this file routes as .../models/index, so, go up one.
       $goto(`../${$backendUiStore.models[0]._id}`)
     }
@@ -18,7 +22,5 @@
 </script>
 
 {#if $backendUiStore.models.length === 0}
-Please create a model
+  Please create a model
-{:else}
+{:else}Please select a model{/if}
-Please select a model
-{/if}

packages/standard-components/src/DataTable.svelte

@@ -68,40 +68,43 @@
 </table>
 
 <style>
-table { 
+  table {
     width: 100%;
     border-collapse: collapse;
   }
 
   /* Zebra striping */
-tr:nth-of-type(odd) { 
+  tr:nth-of-type(odd) {
     background: var(--stripeColor);
   }
 
-th { 
+  th {
     background-color: var(--backgroundColor);
     color: var(--color);
     font-weight: bold;
     text-transform: capitalize;
   }
 
-td, th { 
+  td,
+  th {
     padding: 16px;
     border: 1px solid var(--borderColor);
     text-align: left;
   }
 
-
+  @media only screen and (max-width: 760px),
-@media 
+    (min-device-width: 768px) and (max-device-width: 1024px) {
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px)  {
-
     table {
       width: 100%;
     }
 
     /* Force table to not be like tables anymore */
-	table, thead, tbody, th, td, tr { 
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
       display: block;
     }
 
@@ -112,7 +115,9 @@ only screen and (max-width: 760px),
       left: -9999px;
     }
 
-	tr { border: 1px solid var(--borderColor); }
+    tr {
+      border: 1px solid var(--borderColor);
+    }
 
     td {
       /* Behave  like a "row" */
@@ -134,5 +139,5 @@ only screen and (max-width: 760px),
       /* Label the data */
       content: attr(data-column);
     }
-}
+  }
 </style>