<svelte:component> solution for rendering

packages/builder/src/components/common/Colorpicker.svelte

@@ -2,7 +2,7 @@
   import { onMount, beforeUpdate, afterUpdate } from "svelte"
 
   export let value = null
-  export let onChanged = () => {}
+  export let onChange = () => {}
   export let swatches = []
 
   let picker
@@ -58,13 +58,10 @@
   onMount(() => {
     getRecentColors()
     createPicker()
-
+    return () => {
-    picker.on("save", (colour, instance) => {
+      picker.destroyAndRemove()
-      let color = colour.toHEXA().toString()
+      picker = null
-      onChanged(color)
+    }
-      setRecentColor(color)
-      picker.hide()
-    })
   })
 </script>
 

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

@@ -86,8 +86,11 @@
 
   <div class="component-props-container">
     {#if current_view === 'design'}
-      <!-- <PropsView {component} {components} {onPropChanged} /> -->
+      <DesignView
-      <DesignView {panelDefinition} {componentInstance} {componentDefinition} />
+        {panelDefinition}
+        {componentInstance}
+        {componentDefinition}
+        {onPropChanged} />
     {/if}
 
   </div>

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

@@ -4,8 +4,11 @@
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
+  export let onPropChanged = () => {}
+
   const getProperties = name => panelDefinition.properties[name]
 
+  $: console.log("PDEF", panelDefinition)
   $: propertyGroupNames =
     !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
@@ -14,6 +17,7 @@
   <PropertyGroup
     name={groupName}
     properties={getProperties(groupName)}
+    {onPropChanged}
     {componentDefinition}
     {componentInstance} />
 {/each}

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

@@ -1,20 +1,27 @@
 <script>
+  import { excludeProps } from "./propertyCategories.js"
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
+  export let onPropChanged = () => {}
 
-  let show = false
+  let show = true
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
-
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  $: propertyKeys = Object.keys(properties)
+  function onChange(v) {
+    !!v.target ? onPropChanged(v.target.value) : onPropChanged(v)
+  }
+
+  $: propertyDefinition = Object.entries(properties)
+  $: console.log("props group", properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
-<div class="property-group-container" on:click={() => (show = !show)}>
+<!-- () => (show = !show) -->
+<div class="property-group-container" on:click={() => {}}>
   <div class="property-group-name">
     <div class="icon">
       <i class={icon} />
@@ -22,13 +29,20 @@
     <div class="name">{capitalize(name)}</div>
   </div>
   <div class="property-panel" class:show>
-    <ul>
+
-      {#each propertyKeys as key}
+    {#each propertyDefinition as [key, definition]}
-        <!-- {#if propExistsOnComponentDef(key)} -->
+      <div class="property-control">
-        <li>{properties[key].label || capitalize(key)}</li>
+        {#if propExistsOnComponentDef(key)}
-        <!-- {/if} -->
+          <span>{definition.label || capitalize(key)}</span>
+          <svelte:component
+            this={definition.control}
+            value={componentInstance[key]}
+            on:change={onChange}
+            {onChange}
+            {...excludeProps(definition, ['control'])} />
+        {/if}
+      </div>
     {/each}
-    </ul>
   </div>
 </div>
 
@@ -62,7 +76,11 @@
   .property-panel {
     height: 0px;
     overflow: hidden;
-    /* transition: height 2s ease-in-out; */
+  }
+
+  .property-control {
+    display: flex;
+    flex-flow: row nowrap;
   }
 
   .show {

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

@@ -0,0 +1,14 @@
+<script>
+  export let value = ""
+  export let onChange = value => {}
+  export let options = []
+</script>
+
+<select
+  class="uk-select uk-form-small"
+  {value}
+  on:change={ev => onChange(ev.target.value)}>
+  {#each options || [] as option}
+    <option value={option}>{option}</option>
+  {/each}
+</select>

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

@@ -1,9 +1,16 @@
+import ColorPicker from "../common/Colorpicker.svelte"
+import Input from "../common/Input.svelte"
+import TempSelect from "./TempSelect.svelte"
 /*
   TODO: all strings types are really inputs and could be typed as such
   TODO: Options types need option items
   TODO: Allow for default values for all properties
 */
 
+export const general = {
+  text: { control: Input }
+}
+
 export const layout = {
   flexDirection: { label: "Direction", control: "string" },
   justifyContent: { label: "Justify", control: "string" },
@@ -42,8 +49,8 @@ export const typography = {
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: "colour" },
+  backgroundColor: { label: "Background Color", control: ColorPicker },
-  image: { control: "string" }, //custom
+  image: { control: Input }, //custom
 }
 
 export const border = {

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

@@ -1,4 +1,4 @@
-import { layout, background } from "./propertyCategories.js"
+import { general, layout, background } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { layout, background },
+          properties: { background },
         },
         {
           name: 'Text',
@@ -27,6 +27,7 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
+                general,
                 layout,
                 background,
               },

packages/standard-components/src/Heading.svelte

@@ -11,7 +11,6 @@
 
   $: containerElement && !text && _bb.attachChildren(containerElement)
   $: style = buildStyle({ "font-family": fontFamily, color })
-  // $: console.log("HEADING", color)
 </script>
 
 {#if type === 'h1'}