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
@@ -23,7 +23,7 @@ import { cloneDeep, difference } from "lodash"
  * @param {fetchBindablePropertiesParameter} param
  * @returns {Array.<BindableProperty>}
  */
-export default function({ componentInstanceId, screen, components, models }) {
+export default function ({ componentInstanceId, screen, components, models }) {
   const walkResult = walk({
     // cloning so we are free to mutate props (e.g. by adding _contexts)
     instance: cloneDeep(screen.props),

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",
@@ -371,7 +375,7 @@
 			"xAxisCustomFormat": "string",
 			"xAxisFormat": "string",
 			"xAxisScale": "string",
-			"xAxisValueType":"string",
+			"xAxisValueType": "string",
 			"yTicks": "number",
 			"xTicks": "number",
 			"yAxisBaseline": "string",
@@ -471,7 +475,7 @@
 			"xAxisLabel": "string"
 		}
 	},
-	"brush":{
+	"brush": {
 		"description": "brush chart",
 		"data": true,
 		"props": {
@@ -511,12 +515,12 @@
 			"width": "string",
 			"margin": "string",
 			"aspectRatio": "number",
-			"grid":"string",
+			"grid": "string",
 			"groupLabel": "string",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
 			"nameLabel": "string",
-			"valueLabel":"string",
+			"valueLabel": "string",
 			"yTicks": "string",
 			"yTickTextOffset": "string",
 			"useLegend": "bool"