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",
@@ -313,7 +317,7 @@
 			"lineGradient": "string",
 			"titleText": "string",
 			"valueLabel": "string"
-		}	
+		}
 	},
 	"stackedbar": {
 		"description": "Stacked Bar Chart",
@@ -342,7 +346,7 @@
 			"yAxisLabel": "string",
 			"yAxisLabelOffset": "number",
 			"useLegend": "bool"
-		}		
+		}
 	},
 	"stackarea": {
 		"description": "Step Chart",
@@ -371,7 +375,7 @@
 			"xAxisCustomFormat": "string",
 			"xAxisFormat": "string",
 			"xAxisScale": "string",
-			"xAxisValueType":"string",
+			"xAxisValueType": "string",
 			"yTicks": "number",
 			"xTicks": "number",
 			"yAxisBaseline": "string",
@@ -389,14 +393,14 @@
 			"xAxisLabel": "string",
 			"xAxisLabelOffset": "string",
 			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",	
+			"yAxisLabelOffset": "string",
 			"yTicks": "string"
 		}
 	},
 	"scatterplot": {
 		"description": "Scatterplot Chart",
 		"data": true,
-		"props": { 
+		"props": {
 			"model": "string",
 			"color": "string",
 			"height": "number",
@@ -412,7 +416,7 @@
 			"xTicks": "string",
 			"yAxisFormat": "string",
 			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",	
+			"yAxisLabelOffset": "string",
 			"yTicks": "string"
 		}
 	},
@@ -471,7 +475,7 @@
 			"xAxisLabel": "string"
 		}
 	},
-	"brush":{
+	"brush": {
 		"description": "brush chart",
 		"data": true,
 		"props": {
@@ -499,7 +503,7 @@
 			"useLegend": "bool",
 			"yAxisLabel": "string",
 			"boxSize": "number"
-		}		
+		}
 	},
 	"groupedbar": {
 		"description": "Groupedbar chart",
@@ -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"
@@ -576,12 +580,12 @@
 				"styleBindingProperty": "font-family",
 				"options": [
 					"initial",
-					"Times New Roman",	
+					"Times New Roman",
 					"Georgia",
 					"Arial",
-					"Arial Black",	
+					"Arial Black",
 					"Comic Sans MS",
-					"Impact",	
+					"Impact",
 					"Lucida Sans Unicode"
 				]
 			}
@@ -622,7 +626,7 @@
 				],
 				"default": "div"
 			}
-		},		
+		},
 		"container": true,
 		"tags": [
 			"div",
@@ -636,7 +640,7 @@
 		"props": {
 			"className": "string",
 			"text": "string",
-		"type": {
+			"type": {
 				"type": "options",
 				"default": "h1",
 				"options": [
@@ -665,4 +669,4 @@
 			"className": "string"
 		}
 	}
-}
+}