Apex charts

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

@@ -14,7 +14,7 @@
   class="nav-item"
   class:border
   class:selected
-  style={`padding-left: ${indentLevel * 18}px`}
+  style={`padding-left: ${indentLevel * 14}px`}
   {draggable}
   on:dragend
   on:dragstart
@@ -65,7 +65,7 @@
   }
 
   .content {
-    padding: 0 var(--spacing-m);
+    padding: 0 var(--spacing-s);
     height: 32px;
     display: flex;
     flex-direction: row;
@@ -97,6 +97,9 @@
     flex: 1 1 auto;
     font-weight: 500;
     font-size: var(--font-size-xs);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .actions {

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

@@ -129,7 +129,7 @@
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
-          style="margin-left: {(level + 1) * 18}px" />
+          style="margin-left: {(level + 1) * 16}px" />
       {/if}
 
       <NavItem
@@ -160,7 +160,7 @@
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 18}px" />
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 16}px" />
       {/if}
     </li>
   {/each}
@@ -176,6 +176,6 @@
   .drop-item {
     border-radius: var(--border-radius-m);
     height: 32px;
-    background: var(--blue-light);
+    background: var(--grey-3);
   }
 </style>

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

@@ -0,0 +1,42 @@
+<script>
+  import { Multiselect } from "@budibase/bbui"
+
+  export let options = []
+  export let value = []
+  export let styleBindingProperty
+  export let onChange = () => {}
+
+  let boundValue = getValidOptions(value, options)
+  $: setValue(boundValue)
+  $: sanitiseOptions(options)
+
+  function getValidOptions(selectedOptions, allOptions) {
+    // Fix the hardcoded default string value
+    if (!Array.isArray(selectedOptions)) {
+      selectedOptions = []
+    }
+    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
+  }
+
+  function setValue(val) {
+    onChange(val)
+  }
+
+  function sanitiseOptions(options) {
+    boundValue = getValidOptions(value, options)
+  }
+</script>
+
+<div>
+  <Multiselect extraThin secondary bind:value={boundValue}>
+    {#each options as option}
+      <option value={option}>{option}</option>
+    {/each}
+  </Multiselect>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<script>
+  import TableViewFieldSelect from "./TableViewFieldSelect.svelte"
+</script>
+
+<TableViewFieldSelect {...$$props} multiselect />

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

@@ -1,12 +1,12 @@
 <script>
-  import { onMount, beforeUpdate, afterUpdate } from "svelte"
+  import { onMount } from "svelte"
   import Portal from "svelte-portal"
   import { buildStyle } from "../../helpers.js"
 
   export let options = []
   export let value = ""
   export let styleBindingProperty
-  export let onChange = value => {}
+  export let onChange = () => {}
 
   let open = null
   let rotate = ""

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

@@ -72,7 +72,7 @@
 
     let temp = runtimeToReadableBinding(bindableProperties, value)
 
-    return !value && props.defaultValue !== undefined
+    return value == null && props.defaultValue !== undefined
       ? props.defaultValue
       : temp
   }

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

@@ -118,7 +118,7 @@
           control={definition.control}
           label={definition.label}
           key={definition.key}
-          value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
+          value={componentInstance[definition.key] ?? componentInstance[definition.key]?.defaultValue}
           {componentInstance}
           {onChange}
           props={{ ...excludeProps(definition, ['control', 'label']) }} />

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

@@ -1,11 +1,12 @@
 <script>
   import OptionSelect from "./OptionSelect.svelte"
   import { backendUiStore } from "builderStore"
-  import { onMount } from "svelte"
+  import MultiOptionSelect from "./MultiOptionSelect.svelte"
 
   export let componentInstance = {}
   export let value = ""
-  export let onChange = (val = {})
+  export let onChange = () => {}
+  export let multiselect = false
 
   const tables = $backendUiStore.tables
 
@@ -24,4 +25,8 @@
   }
 </script>
 
-<OptionSelect {value} {onChange} {options} />
+{#if multiselect}
+  <MultiOptionSelect {value} {onChange} {options} />
+{:else}
+  <OptionSelect {value} {onChange} {options} />
+{/if}