linting

packages/bbui/src/Form/Core/TextField.svelte

@@ -66,12 +66,11 @@
     if (type === "bigint") {
       return "numeric"
     }
-    return type === "number" ?
-"decimal" : "text"
+    return type === "number" ? "decimal" : "text"
   }
 
   onMount(() => {
-    if (disabled) return;
+    if (disabled) return
     focus = autofocus
     if (focus) field.focus()
   })

packages/builder/src/builderStore/componentUtils.js

@@ -257,9 +257,10 @@ export const getComponentName = component => {
     return ""
   }
 
-  const components = get(store)?.components || {};
-  const componentDefinition = components[component._component] || {};
-  const name = componentDefinition.friendlyName || componentDefinition.name || "";
+  const components = get(store)?.components || {}
+  const componentDefinition = components[component._component] || {}
+  const name =
+    componentDefinition.friendlyName || componentDefinition.name || ""
 
-  return name;
+  return name
 }

packages/builder/src/builderStore/index.js

@@ -4,7 +4,7 @@ import { getTemporalStore } from "./store/temporal"
 import { getThemeStore } from "./store/theme"
 import { getUserStore } from "./store/users"
 import { getDeploymentStore } from "./store/deployments"
-import { derived, writable } from "svelte/store"
+import { derived } from "svelte/store"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 import { createHistoryStore } from "builderStore/store/history"

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

@@ -100,7 +100,7 @@
     {:else if icon}
       <div class="icon" class:right={rightAlignIcon}>
         <AbsTooltip type="info" position="right" text={iconTooltip}>
-        <Icon color={iconColor} size="S" name={icon} />
+          <Icon color={iconColor} size="S" name={icon} />
         </AbsTooltip>
       </div>
     {/if}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -45,12 +45,18 @@
   $: id = $selectedComponent?._id
   $: id, (section = tabs[0])
 
-  $: componentName = getComponentName(componentInstance);
+  $: componentName = getComponentName(componentInstance)
 </script>
 
 {#if $selectedComponent}
   {#key $selectedComponent._id}
-  <Panel {title} icon={componentDefinition?.icon} iconTooltip={componentName} borderLeft wide>
+    <Panel
+      {title}
+      icon={componentDefinition?.icon}
+      iconTooltip={componentName}
+      borderLeft
+      wide
+    >
       <span class="panel-title-content" slot="panel-title-content">
         <input
           class="input"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte

@@ -1,9 +1,9 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { getHorizontalResizeActions } from './ScreenList/resizable';
+  import { getHorizontalResizeActions } from "./ScreenList/resizable"
 
-  const [resizable, resizableHandle] = getHorizontalResizeActions();
+  const [resizable, resizableHandle] = getHorizontalResizeActions()
 </script>
 
 <div class="panel" use:resizable>
@@ -11,13 +11,8 @@
     <ScreenList />
     <ComponentList />
   </div>
-  <div
-    class="divider"
-  >
-    <div class="dividerClickExtender"
-      role="separator"
-      use:resizableHandle
-     />
+  <div class="divider">
+    <div class="dividerClickExtender" role="separator" use:resizableHandle />
   </div>
 </div>
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte

@@ -1,18 +1,14 @@
 <script>
   import { Icon, Layout, Body } from "@budibase/bbui"
-  import {
-    store,
-    sortedScreens,
-    userSelectedResourceMap,
-  } from "builderStore"
+  import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
   import { goto } from "@roxi/routify"
-  import { getVerticalResizeActions } from './resizable';
+  import { getVerticalResizeActions } from "./resizable"
   import { tick } from "svelte"
 
-  const [resizable, resizableHandle] = getVerticalResizeActions();
+  const [resizable, resizableHandle] = getVerticalResizeActions()
 
   let searching = false
   let resizing = false
@@ -58,16 +54,10 @@
   const handleScroll = e => {
     scrolling = e.target.scrollTop !== 0
   }
-
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
-<div
-  class="screens"
-  class:searching
-  class:resizing
-  use:resizable
->
+<div class="screens" class:searching class:resizing use:resizable>
   <div class="header" class:scrolling>
     <input
       readonly={!searching}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js

@@ -1,8 +1,14 @@
-const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty, initialValue, setValue = () => {}) => {
-  let element = null;
+const getResizeActions = (
+  cssProperty,
+  mouseMoveEventProperty,
+  elementProperty,
+  initialValue,
+  setValue = () => {}
+) => {
+  let element = null
 
-  const elementAction = (node) => {
-    element = node;
+  const elementAction = node => {
+    element = node
 
     if (initialValue != null) {
       element.style[cssProperty] = `${initialValue}px`
@@ -10,89 +16,104 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
 
     return {
       destroy() {
-        element = null;
-      }
+        element = null
+      },
     }
   }
 
-  const dragHandleAction = (node) => {
-    let startProperty = null;
-    let startPosition = null;
+  const dragHandleAction = node => {
+    let startProperty = null
+    let startPosition = null
 
-    const handleMouseMove = (e) => {
-      e.preventDefault(); // Prevent highlighting while dragging
-      const change = e[mouseMoveEventProperty] - startPosition;
+    const handleMouseMove = e => {
+      e.preventDefault() // Prevent highlighting while dragging
+      const change = e[mouseMoveEventProperty] - startPosition
       element.style[cssProperty] = `${startProperty + change}px`
     }
 
-    const handleMouseUp = (e) => {
-      e.preventDefault(); // Prevent highlighting while dragging
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+    const handleMouseUp = e => {
+      e.preventDefault() // Prevent highlighting while dragging
+      window.removeEventListener("mousemove", handleMouseMove)
+      window.removeEventListener("mouseup", handleMouseUp)
 
-      element.style.removeProperty('transition'); // remove temporary transition override
+      element.style.removeProperty("transition") // remove temporary transition override
       for (let item of document.getElementsByTagName("iframe")) {
-        item.style.removeProperty("pointer-events");
+        item.style.removeProperty("pointer-events")
       }
 
-      setValue(element[elementProperty]);
+      setValue(element[elementProperty])
     }
 
-    const handleMouseDown = (e) => {
+    const handleMouseDown = e => {
       if (e.detail > 1) {
-        // e.detail is the number of rapid clicks, so e.detail = 2 is 
-        // a double click. We want to prevent default behaviour in 
+        // e.detail is the number of rapid clicks, so e.detail = 2 is
+        // a double click. We want to prevent default behaviour in
         // this case as it highlights nearby selectable elements, which
         // then interferes with the resizing mousemove.
-        // Putting this on the double click handler doesn't seem to 
+        // Putting this on the double click handler doesn't seem to
         // work, so it must go here.
-        e.preventDefault();
+        e.preventDefault()
       }
 
-      if (e.target.hasAttribute("disabled") && e.target.getAttribute("disabled") !== "false") {
-        return;
+      if (
+        e.target.hasAttribute("disabled") &&
+        e.target.getAttribute("disabled") !== "false"
+      ) {
+        return
       }
 
-      element.style.transition = `${cssProperty} 0ms`; // temporarily override any height transitions
+      element.style.transition = `${cssProperty} 0ms` // temporarily override any height transitions
 
       // iframes swallow mouseup events if your cursor ends up over it during a drag, so make them
       // temporarily non-interactive
       for (let item of document.getElementsByTagName("iframe")) {
-        item.style.pointerEvents = "none";
+        item.style.pointerEvents = "none"
       }
 
-      startProperty = element[elementProperty];
-      startPosition = e[mouseMoveEventProperty];
+      startProperty = element[elementProperty]
+      startPosition = e[mouseMoveEventProperty]
 
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    };
-
-    const handleDoubleClick = () => {
-      element.style.removeProperty(cssProperty);
+      window.addEventListener("mousemove", handleMouseMove)
+      window.addEventListener("mouseup", handleMouseUp)
     }
 
-    node.addEventListener("mousedown", handleMouseDown);
-    node.addEventListener("dblclick", handleDoubleClick);
+    const handleDoubleClick = () => {
+      element.style.removeProperty(cssProperty)
+    }
+
+    node.addEventListener("mousedown", handleMouseDown)
+    node.addEventListener("dblclick", handleDoubleClick)
 
     return {
       destroy() {
-        node.removeEventListener("mousedown", handleMouseDown);
-        node.removeEventListener("dblclick", handleDoubleClick);
-      }
+        node.removeEventListener("mousedown", handleMouseDown)
+        node.removeEventListener("dblclick", handleDoubleClick)
+      },
     }
   }
 
-  return [
-    elementAction,
-    dragHandleAction
-  ]
-};
+  return [elementAction, dragHandleAction]
+}
 
 export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
-  return getResizeActions("height", "pageY", 'clientHeight', initialValue, setValue);
-};
+  return getResizeActions(
+    "height",
+    "pageY",
+    "clientHeight",
+    initialValue,
+    setValue
+  )
+}
 
-export const getHorizontalResizeActions = (initialValue, setValue = () => {}) => {
-  return getResizeActions("width", "pageX", 'clientWidth', initialValue, setValue);
-};
+export const getHorizontalResizeActions = (
+  initialValue,
+  setValue = () => {}
+) => {
+  return getResizeActions(
+    "width",
+    "pageX",
+    "clientWidth",
+    initialValue,
+    setValue
+  )
+}