Screen and page latest

packages/builder/src/builderStore/store/index.js

@@ -69,6 +69,7 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
+  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -171,6 +172,15 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
   })
 }
 
+const editPageOrScreen = store => (key, value) => {
+  store.update(state => {
+    state.currentPreviewItem[key] = value
+    _saveCurrentPreviewItem(state)
+
+    return state
+  })
+}
+
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName)

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

@@ -1,5 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
+  import {screen, page} from "./propertyCategories.js"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -41,15 +42,48 @@
   $: panelDefinition = componentPropDefinition.properties
     ? componentPropDefinition.properties[selectedCategory.value]
     : {}
+  
+  let panelDefNew = {}
 
-  // SCREEN PROPS =============================================
-  $: screen_props =
-    $store.currentFrontEndType === "page"
-      ? getProps($store.currentPreviewItem, ["name", "favicon"])
-      : getProps($store.currentPreviewItem, ["name", "description", "route"])
+  $: {
+    if(componentPropDefinition.properties) {
+      if(selectedCategory.value === "design") {
+        panelDefNew = componentPropDefinition.properties["design"]
+      }else{
+        let panelDef = componentPropDefinition.properties["settings"]
+        if($store.currentFrontEndType === "page") {
+          panelDefNew = [...page,...panelDef]
+        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+          panelDefNew = [...screen, ...panelDef]
+        }else {
+          panelDefNew = panelDef
+        }
+      }
+    }
+  }
+
+  let componentInstanceNew = {}
+  $: {
+     if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
+       componentInstanceNew = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
+     }else {
+       componentInstanceNew = $store.currentComponentInfo
+     }
+  }
+
+  $: console.log("COMP INSTA NEW", componentInstanceNew)
 
   const onStyleChanged = store.setComponentStyle
-  const onPropChanged = store.setComponentProp
+
+  function onPropChanged(key, value) {
+   if($store.currentFrontEndType === "page") {
+      store.editPageOrScreen(key, value)
+   }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+      store.editPageOrScreen(key, value)
+   }else {
+      store.setComponentProp(key, value)
+    }
+  }
 
   function walkProps(component, action) {
     action(component)
@@ -86,12 +120,12 @@
 
   <div class="component-props-container">
     {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+      <DesignView panelDefinition={panelDefNew} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
+        panelDefinition={panelDefNew}
         {componentInstance}
         {componentDefinition}
-        {panelDefinition}
         onChange={onPropChanged} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
@@ -106,12 +140,10 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    /* Merge Check */
     overflow-x: hidden;
     overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
-    /* Merge Check */
   }
 
   .title > div:nth-child(1) {

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

@@ -9,6 +9,7 @@
     newScreenPicker.show()
   }
 
+  $: console.log("STORE SCREENS", $store.screens)
   let newScreenPicker
 </script>
 

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

@@ -9,7 +9,9 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-  const propExistsOnComponentDef = prop => prop in componentDefinition.props
+  let pageScreenProps = ["name", "favicon", "description", "route"]
+  
+  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)

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

@@ -2,10 +2,18 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-// import Colorpicker from "../common/Colorpicker.svelte"
-/*
-  TODO: Allow for default values for all properties
-*/
+
+
+export const screen = [
+  { label: "Name", key: "name", control: Input },
+  { label: "Description", key: "description", control: Input },
+  { label: "Route", key: "route", control: Input },
+]
+
+export const page = [
+  { label: "Name", key: "name", control: Input },
+  { label: "Favicon", key: "favicon", control: Input },
+]
 
 export const layout = [
   {

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

@@ -334,7 +334,10 @@ export default {
             "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
           children: [],
-          properties: { design: { ...all } },
+          properties: { 
+            design: { ...all }, 
+            settings: [{ label: "Logo URL", key: "logoUrl", control: Input }, ],
+           },
         },
       ],
     },