diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte index ba65267a9c..a4b905fed1 100644 --- a/packages/builder/src/BackendRoot.svelte +++ b/packages/builder/src/BackendRoot.svelte @@ -33,23 +33,24 @@ export let navWidth = "50px"; \ No newline at end of file diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js index fa0d1a923a..420b41e1e2 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store.js @@ -55,7 +55,7 @@ export const getStore = () => { hasAppPackage: false, accessLevels: [], currentNode: null, - libraries:null, + libraries:null }; const store = writable(initial); diff --git a/packages/builder/src/userInterface/ComponentInstanceEditor.svelte b/packages/builder/src/userInterface/ComponentInstanceEditor.svelte index 7c59d20c6f..2e04829fcb 100644 --- a/packages/builder/src/userInterface/ComponentInstanceEditor.svelte +++ b/packages/builder/src/userInterface/ComponentInstanceEditor.svelte @@ -4,7 +4,10 @@ import PropsView from "./PropsView.svelte"; import IconButton from "../common/IconButton.svelte"; import { getComponentInfo } from "./pagesParsing/createProps"; import { store } from "../builderStore"; -import { cloneDeep } from "lodash/fp"; +import { + cloneDeep, + isUndefined +} from "lodash/fp"; import { fade, slide } from 'svelte/transition'; export let propertyName = ""; @@ -29,9 +32,13 @@ const onSubComponentGoBack = () => { editingSubComponentProps = null; } -const onEditComponentProp = (propName) => { - editingSubComponentName = propName; - editingSubComponentProps = instanceProps[propName]; +const onEditComponentProp = (propName, arrayIndex, arrayPropName) => { + editingSubComponentName = isUndefined(arrayIndex) + ? propName + : `${propName}[${arrayIndex}].${arrayPropName}`; + editingSubComponentProps = isUndefined(arrayIndex) + ? instanceProps[propName] + : instanceProps[propName][arrayIndex][arrayPropName]; }; diff --git a/packages/builder/src/userInterface/ComponentPropSelector.svelte b/packages/builder/src/userInterface/ComponentPropSelector.svelte index 86b1e645e5..1126fb363f 100644 --- a/packages/builder/src/userInterface/ComponentPropSelector.svelte +++ b/packages/builder/src/userInterface/ComponentPropSelector.svelte @@ -18,7 +18,7 @@ export let props = emptyProps(); export let onValueChanged = () => {}; export let onComponentChosen = () => {}; export let onEdit = () => {}; -export let label = "" +export let label = ""; export let disabled = false; const CHOOSE_COMPONENT = "choose_component"; diff --git a/packages/builder/src/userInterface/CurrentItemPreview.svelte b/packages/builder/src/userInterface/CurrentItemPreview.svelte index 30a6b19d2f..ef8d707045 100644 --- a/packages/builder/src/userInterface/CurrentItemPreview.svelte +++ b/packages/builder/src/userInterface/CurrentItemPreview.svelte @@ -10,6 +10,24 @@ import { import { pipe } from "../common/core"; import { splitName } from "./pagesParsing/splitRootComponentName" import { afterUpdate } from 'svelte'; +import { getRootComponent } from "./pagesParsing/getRootComponent"; + +if(!window.budibaseIframeConnector) { + window.budibaseIframeConnector = { + initialiseComponent(props, htmlElement) { + const rootComponent = getRootComponent( + props._component, allComponents); + + const {componentName, libName} = splitName( + rootComponent.name); + + new (libraries[libName][componentName])({ + target: htmlElement, + props: {...props, _app: window.budibaseIframeConnector} + }); + } + } +} let component; let stylesheetLinks = ""; @@ -18,6 +36,9 @@ let props; let componentLibraryUrl = ""; let rootComponentName = ""; let iframe; +let libraries; +let allComponents; + store.subscribe(s => { const {componentName, libName} = splitName( @@ -31,6 +52,8 @@ store.subscribe(s => { join("\n") ]); componentLibraryUrl = makeLibraryUrl(s.appname, libName); + libraries = s.libraries; + allComponents = s.allComponents; }); /* @@ -65,7 +88,7 @@ const iframeLoaded = () => { const componentClass = module['${rootComponentName}']; const instance = new componentClass({ target: document.body, - props: JSON.parse('${JSON.stringify(props)}') + props: {...${JSON.stringify(props)}, _app: window.parent.budibaseIframeConnector} }) ; }) @@ -92,9 +115,4 @@ const iframeLoaded = () => { grid-column-start: middle; } -#comonent-container-mock { - position:fixed; - left: -2000px -} - \ No newline at end of file diff --git a/packages/builder/src/userInterface/EditComponent.svelte b/packages/builder/src/userInterface/EditComponent.svelte index 2a7b7d4f84..a95e19f722 100644 --- a/packages/builder/src/userInterface/EditComponent.svelte +++ b/packages/builder/src/userInterface/EditComponent.svelte @@ -111,9 +111,14 @@ const showDialog = () => { UIkit.modal(modalElement).show(); } -const onEditComponentProp = (propName) => { - editingComponentInstance = component.props[propName]; - editingComponentInstancePropName = propName; +const onEditComponentProp = (propName, arrayIndex, arrayPropName) => { + + editingComponentInstance = isUndefined(arrayIndex) + ? component.props[propName] + : component.props[propName][arrayIndex][arrayPropName]; + editingComponentInstancePropName = isUndefined(arrayIndex) + ? propName + : `${propName}[${arrayIndex}].${arrayPropName}`; } const componentInstanceCancelEdit = () => { diff --git a/packages/builder/src/userInterface/PropArraySelector.svelte b/packages/builder/src/userInterface/PropArraySelector.svelte new file mode 100644 index 0000000000..af9b4ca903 --- /dev/null +++ b/packages/builder/src/userInterface/PropArraySelector.svelte @@ -0,0 +1,124 @@ + + +