fix frontend bugs

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.32.0",
+    "@budibase/bbui": "^1.33.0",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, DataList } from "@budibase/bbui"
   import { find, map, keys, reduce, keyBy } from "lodash/fp"
   import { pipe } from "components/common/core"
   import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@@ -29,12 +29,12 @@
       {/each}
     </Select>
   {:else if parameter.name === 'url'}
-    <Select editable on:change bind:value={parameter.value}>
+    <DataList editable on:change bind:value={parameter.value}>
       <option value="" />
       {#each $store.allScreens as screen}
         <option value={screen.route}>{screen.props._instanceName}</option>
       {/each}
-    </Select>
+    </DataList>
   {:else}
     <Input
       name={parameter.name}

packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte

@@ -1,6 +1,6 @@
 <script>
   // accepts an array of field names, and outputs an object of { FieldName: value }
-  import { Select, Label, TextButton, Spacer } from "@budibase/bbui"
+  import { DataList, Label, TextButton, Spacer } from "@budibase/bbui"
   import { store, backendUiStore } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"

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

@@ -93,7 +93,7 @@
       {...props}
       name={key} />
   </div>
-  {#if control == Input}
+  {#if control === Input && !key.startsWith("_")}
     <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
       <Icon name="edit" />
     </button>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store } from "builderStore"
 
@@ -10,9 +10,9 @@
   const handleBlur = () => dispatch("change", value)
 </script>
 
-<Select editable secondary on:blur={handleBlur} on:change bind:value>
+<DataList editable secondary on:blur={handleBlur} on:change bind:value>
   <option value="" />
   {#each $store.allScreens as screen}
     <option value={screen.route}>{screen.props._instanceName}</option>
   {/each}
-</Select>
+</DataList>

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

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

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

@@ -6,6 +6,7 @@ import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
 import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import Colorpicker from "@budibase/colorpicker"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -515,10 +516,10 @@ export default {
                 key: "datasource",
                 control: ModelViewSelect,
               },
-              { label: "Stripe Color", key: "stripeColor", control: Input },
+              { label: "Stripe Color", key: "stripeColor", control: Colorpicker, defaultValue: "#FFFFFF" },
-              { label: "Border Color", key: "borderColor", control: Input },
+              { label: "Border Color", key: "borderColor", control: Colorpicker, defaultValue: "#FFFFFF" },
-              { label: "TH Color", key: "backgroundColor", control: Input },
+              { label: "TH Color", key: "backgroundColor", control: Colorpicker, defaultValue: "#FFFFFF" },
-              { label: "TH Font Color", key: "color", control: Input },
+              { label: "TH Font Color", key: "color", control: Colorpicker, defaultValue: "#FFFFFF" },
               { label: "Table", key: "model", control: ModelSelect },
             ],
           },

packages/builder/yarn.lock

@@ -688,9 +688,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.32.0":
+"@budibase/bbui@^1.33.0":
-  version "1.32.0"
+  version "1.33.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.32.0.tgz#4b099e51cf8aebfc963a763bb9687994a2ee26a8"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.33.0.tgz#216b24dd815f45880e9795e66b04848329b0390f"
+  integrity sha512-Rrt5eLbea014TIfAbT40kP0D0AWNUi8Q0kDr3UZO6Aq4UXgjc0f53ZuJ7Kb66YRDWrqiucjf1FtvOUs3/YaD6g==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"