initial commit

packages/builder/src/builderStore/fetchBindableProperties.js

@@ -1,4 +1,4 @@
-import { cloneDeep, difference } from "lodash"
+import { cloneDeep, difference } from "lodash/fp"
 
 /**
  * parameter for fetchBindableProperties function

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

@@ -0,0 +1,49 @@
+<script>
+  import api from "builderStore/api"
+
+  import { store } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  export let value = "Something is wrong"
+
+  async function getBindableProperties() {
+    const modelResponse = await api.get(`/api/models/`)
+    const models = await modelResponse.json()
+
+    const result = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      models: [],
+    })
+
+    console.log("Result: ", result)
+  }
+</script>
+
+<div class="container">{value}</div>
+<button on:click={getBindableProperties}>Get stuff!</button>
+<ul>
+  <li>1</li>
+  <li>2</li>
+  <li>3</li>
+  <li>4</li>
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    padding: var(--spacing-s) 0;
+  }
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+</style>

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

@@ -1,4 +1,6 @@
 <script>
+  import { DropdownMenu } from "@budibase/bbui"
+  import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
   import { onMount, getContext } from "svelte"
 
   export let label = ""
@@ -7,6 +9,8 @@
   export let value
   export let props = {}
   export let onChange = () => {}
+  let anchor
+  let dropdown
 
   function handleChange(key, v) {
     let innerVal = v
@@ -42,7 +46,13 @@
       {...props}
       name={key} />
   </div>
+  <div bind:this={anchor}>
+    <button on:click={dropdown.show}>Dropdown</button>
   </div>
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="right">
+  <BindingDropdown />
+</DropdownMenu>
 
 <style>
   .property-control {

packages/standard-components/components.json

@@ -92,6 +92,7 @@
 	},
 	"input": {
 		"name": "Input",
+		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
 			"value": "string",
@@ -151,7 +152,10 @@
 		"children": false,
 		"props": {
 			"text": "string",
-			"type": {"type": "string", "default": "none"}
+			"type": {
+				"type": "string",
+				"default": "none"
+			}
 		},
 		"tags": [
 			"div",