Name and Value Selects that depend on Model / View

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

@@ -0,0 +1,22 @@
+<script>
+  import OptionSelect from "./OptionSelect.svelte"
+  import { backendUiStore } from "builderStore"
+  import { onMount } from "svelte"
+
+  export let componentInstance = {}
+
+  let datasource = componentInstance.datasource
+  const models = $backendUiStore.models
+
+  let options = []
+
+  $: model = datasource ? models.find(m => m._id === datasource.modelId) : null
+
+  $: if (model) {
+    options = datasource.isModel
+      ? Object.keys(model.schema)
+      : Object.keys(model.views[datasource.name].schema)
+  }
+</script>
+
+<OptionSelect {options} />

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

@@ -2,6 +2,7 @@
   import { onMount, beforeUpdate, afterUpdate } from "svelte"
   import Portal from "svelte-portal"
   import { buildStyle } from "../../helpers.js"
+
   export let options = []
   export let value = ""
   export let styleBindingProperty

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

@@ -30,6 +30,10 @@
     { key: "favicon", label: "Favicon", control: Input },
   ]
 
+  const canRenderControl = (key, dependsOn) =>
+    propExistsOnComponentDef(key) &&
+    (!dependsOn || componentInstance[dependsOn])
+
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
 </script>
@@ -58,14 +62,17 @@
 
 {#if panelDefinition && panelDefinition.length > 0}
   {#each panelDefinition as definition}
-    {#if propExistsOnComponentDef(definition.key)}
+    {#if canRenderControl(definition.key, definition.dependsOn)}
       <PropertyControl
         control={definition.control}
         label={definition.label}
         key={definition.key}
         value={componentInstance[definition.key]}
         {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+        props={{ componentInstance, ...excludeProps(definition, [
+            'control',
+            'label',
+          ]) }} />
     {/if}
   {/each}
 {:else}

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

@@ -3,6 +3,7 @@ import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
 import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
+import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -582,6 +583,18 @@ export default {
                     key: "datasource",
                     control: ModelViewSelect,
                   },
+                  {
+                    label: "Name Field",
+                    key: "nameKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
+                  {
+                    label: "Value Field",
+                    key: "valueKey",
+                    dependsOn: "datasource",
+                    control: ModelViewFieldSelect,
+                  },
                   {
                     label: "Animate Chart",
                     key: "isAnimated",
@@ -617,16 +630,6 @@ export default {
                       "yellow",
                     ],
                   },
-                  {
-                    label: "Name Field",
-                    key: "nameKey",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Field",
-                    key: "valueKey",
-                    control: Input,
-                  },
                   {
                     label: "External Radius",
                     key: "externalRadius",

packages/standard-components/.gitignore

@@ -2,5 +2,4 @@
 node_modules
 yarn.lock
 package-lock.json
-dist/index.js
+dist
-dist/index.js.map

packages/standard-components/components.json

@@ -358,6 +358,7 @@
 		"data": true,
 		"props": {
 			"datasource": "string",
+			"data": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",

packages/standard-components/src/Chart/Donut.svelte

@@ -59,7 +59,7 @@
 
   onMount(async () => {
     if (chart) {
-      if (model) {
+      if (datasource) {
         let _data = await fetchData(datasource)
         data = checkAndReformatData(_data)
         if (data.length === 0) {