generators..

packages/builder/rollup.config.js

@@ -16,7 +16,7 @@ const _builderProxy =  proxy('/_builder', {
   pathRewrite: {'^/_builder' : ''}
 });
 
-const apiProxy =  proxy(['/_builder/api/**', '/_builder/**/componentlibrary'] , {
+const apiProxy =  proxy(['/_builder/api/**', '/_builder/**/componentlibrary', '/_builder/**/componentlibraryGenerators'] , {
 	target,
 	logLevel: "debug",
 	changeOrigin: true,

packages/builder/src/accessLevels/AccessLevelsRoot.svelte

@@ -65,7 +65,7 @@ const getPermissionsString = perms => {
         </tr>
     </thead>
     <tbody>
-        {#each $store.accessLevels as level}
+        {#each $store.accessLevels.levels as level}
         <tr>
             <td >{level.name}</td>
             <td >{getPermissionsString(level.permissions)}</td>
@@ -88,7 +88,7 @@ const getPermissionsString = perms => {
                      allPermissions={allPermissions}
                      onFinished={onEditingFinished}
                      isNew={editingLevelIsNew}
-                     allLevels={$store.accessLevels}
+                     allLevels={$store.accessLevels.levels}
                      hierarchy={$store.hierarchy}
                      actions={$store.actions} />
     {/if}    

packages/builder/src/builderStore/createPackage.js

@@ -7,7 +7,6 @@ export const createPackage = (packageInfo, store) => {
       hierarchy:root,
       actions:[],
       triggers:[],
-      accessLevels: [],
-      accessLevelsVersion: 0
+      accessLevels: {version:0, levels:[]}
     });
 };

packages/builder/src/builderStore/loadComponentLibraries.js

@@ -11,6 +11,17 @@ export const loadLibs = async (appName, appPackage) => {
     return allLibraries;
 }
 
+export const loadGeneratorLibs = async (appName, appPackage) => {
+
+    const allGeneratorLibs = {};
+    for(let lib of appPackage.pages.componentLibraries) {
+        const generatorModule = await import(makeGeneratorLibraryUrl(appName, lib));
+        allGeneratorLibs[lib] = generatorModule;
+    }
+
+    return allGeneratorLibs;
+}
+
 export const loadLibUrls = (appName, appPackage) => {
 
     const allLibraries = [];
@@ -27,5 +38,13 @@ export const loadLib = async (appName, lib, allLibs) => {
     return allLibs;
 }
 
+export const loadGeneratorLib = async (appName, lib, allGeneratorLibs) => {
+    allGeneratorLibs[lib] = await import(makeGeneratorLibraryUrl(appName, lib));
+    return allGeneratorLibs;
+}
+
 export const makeLibraryUrl = (appName, lib) => 
-    `/_builder/${appName}/componentlibrary?lib=${encodeURI(lib)}`
+    `/_builder/${appName}/componentlibrary?lib=${encodeURI(lib)}`
+
+export const makeGeneratorLibraryUrl = (appName, lib) => 
+    `/_builder/${appName}/componentlibraryGenerators?lib=${encodeURI(lib)}`

packages/builder/src/builderStore/store.js

@@ -19,7 +19,9 @@ import { rename } from "../userInterface/pagesParsing/renameComponent";
 import { 
     getComponentInfo, getNewComponentInfo 
 } from "../userInterface/pagesParsing/createProps";
-import { loadLibs, loadLibUrls } from "./loadComponentLibraries";
+import { 
+    loadLibs, loadLibUrls, loadGeneratorLibs
+} from "./loadComponentLibraries";
 
 let appname = "";
 
@@ -45,7 +47,7 @@ export const getStore = () => {
         activeNav: "database",
         isBackend:true,
         hasAppPackage: false,
-        accessLevels: [],
+        accessLevels: {version:0, levels:[]},
         currentNode: null,
         libraries:null,
         showSettings:false,
@@ -88,6 +90,7 @@ export const getStore = () => {
     store.showBackend = showBackend(store);
     store.showSettings = showSettings(store);
     store.useAnalytics = useAnalytics(store);
+    store.createGeneratedComponents = createGeneratedComponents(store);
     return store;
 } 
 
@@ -110,15 +113,17 @@ const initialise = (store, initial) => async () => {
                          .then(r => r.json());
 
     initial.libraries = await loadLibs(appname, pkg);
+    initial.generatorLibraries = await loadGeneratorLibs(appname, pkg);
     initial.loadLibraryUrls = () => loadLibUrls(appname, pkg);
     initial.appname = appname;
     initial.pages = pkg.pages;
     initial.hasAppPackage = true;
     initial.hierarchy = pkg.appDefinition.hierarchy;
-    initial.accessLevels = pkg.accessLevels.levels;
+    initial.accessLevels = pkg.accessLevels;
     initial.derivedComponents = pkg.derivedComponents;
+    initial.generators = generatorsArray(pkg.rootComponents.generators);
     initial.allComponents = combineComponents(
-        pkg.derivedComponents, pkg.rootComponents);
+        pkg.derivedComponents, pkg.rootComponents.components);
     initial.actions = reduce((arr, action) => {
         arr.push(action);
         return arr;
@@ -137,6 +142,14 @@ const initialise = (store, initial) => async () => {
     return initial;
 }
 
+const generatorsArray = generators => 
+    pipe(generators, [
+        keys,
+        filter(k => k !== "_lib"),
+        map(k => generators[k])
+    ]);
+
+
 const showSettings = store => show => {
     store.update(s => {
         s.showSettings = !s.showSettings;
@@ -377,20 +390,28 @@ const deleteTrigger  = store => trigger => {
     });
 }
 
+const incrementAccessLevelsVersion = (s) =>
+    s.accessLevels.version = (s.accessLevels.version || 0) + 1; 
+
 const saveLevel = store => (newLevel, isNew, oldLevel=null) => {
     store.update(s => {
 
+        const levels = s.accessLevels.levels;
+
         const existingLevel = isNew 
                                ? null
-                               : find(a => a.name === oldLevel.name)(s.accessLevels);
+                               : find(a => a.name === oldLevel.name)(levels);
             
         if(existingLevel) {
-            s.accessLevels = pipe(s.accessLevels, [
+            s.accessLevels.levels = pipe(levels, [
                 map(a => a === existingLevel ? newLevel : a)
             ]);
         } else {
-            s.accessLevels.push(newLevel);
+            s.accessLevels.levels.push(newLevel);
         }
+
+        incrementAccessLevelsVersion(s);
+
         savePackage(store, s);
         return s;
     });
@@ -398,7 +419,8 @@ const saveLevel = store => (newLevel, isNew, oldLevel=null) => {
 
 const deleteLevel = store => level => {
     store.update(s => {
-        s.accessLevels = filter(t => t.name !== level.name)(s.accessLevels);
+        s.accessLevels.levels = filter(t => t.name !== level.name)(s.accessLevels.levels);
+        incrementAccessLevelsVersion(s);
         savePackage(store, s);
         return s;
     });
@@ -442,7 +464,7 @@ const saveDerivedComponent = store => (derivedComponent) => {
     })
 };
 
-const createDerivedComponent = store => (componentName) => {
+const createDerivedComponent = store => componentName => {
     store.update(s => {
         const newComponentInfo = getNewComponentInfo(
             s.allComponents, componentName);
@@ -453,7 +475,25 @@ const createDerivedComponent = store => (componentName) => {
         s.currentComponentIsNew = true;
         return s;
     });
-}
+};
+
+const createGeneratedComponents = store => components => {
+    store.update(s => {
+        s.allComponents = [...s.allComponents, ...components];
+
+        const doCreate = async () => {
+            for(let c of components) {
+                await api.post(`/_builder/api/${s.appname}/derivedcomponent`, c);
+            }
+
+            await savePackage(store, s);
+        }
+        
+        doCreate();
+
+        return s;
+    });
+};
 
 const deleteDerivedComponent = store => name => {
     store.update(s => {
@@ -470,6 +510,7 @@ const deleteDerivedComponent = store => name => {
         s.derivedComponents = derivedComponents;
         if(s.currentFrontEndItem.name === name) {
             s.currentFrontEndItem = null;
+            s.currentFrontEndType = "";
         }
 
         api.delete(`/_builder/api/${s.appname}/derivedcomponent/${name}`);
@@ -598,9 +639,9 @@ const removeStylesheet = store => stylesheet => {
 const refreshComponents = store => async () => {
 
     const components = 
-        await api.get(`/_builder/api/${db.appname}/components`).then(r => r.json());
+        await api.get(`/_builder/api/${db.appname}/rootcomponents`).then(r => r.json());
 
-    const rootComponents = pipe(components, [
+    const rootComponents = pipe(components.components, [
         keys,
         map(k => ({...components[k], name:k}))
     ]);
@@ -610,6 +651,7 @@ const refreshComponents = store => async () => {
             filter(c => !isRootComponent(c)),
             concat(rootComponents)
         ]);
+        s.generators = components.generators;
         return s;
     });
 };
@@ -632,7 +674,7 @@ const savePackage = (store, s) => {
         pages:s.pages,
     }
 
-    api.post(`/_builder/api/${s.appname}/appPackage`, data);
+    return api.post(`/_builder/api/${s.appname}/appPackage`, data);
 }
 
 const setCurrentComponent = store => componentName => {

packages/builder/src/common/core.js

@@ -3,6 +3,10 @@ import {hierarchy as hierarchyFunctions,
 import {find, filter, includes, keyBy, some,
     flatten, map} from "lodash/fp";
 
+import {
+    generateSchema
+} from "../../../core/src/indexing/indexSchemaCreator";
+
 export const pipe = common.$;
 
 export const events = common.eventsList;
@@ -72,4 +76,19 @@ export const getNewAccessLevel = () =>
     authApi().getNewAccessLevel();
 
 export const validateAccessLevels = (hierarchy, actions, accessLevels) => 
-    authApi(hierarchy, actions).validateAccessLevels(accessLevels);
+    authApi(hierarchy, actions).validateAccessLevels(accessLevels);
+
+export const getIndexNodes = (hierarchy) => 
+    pipe(hierarchy, [
+        hierarchyFunctions.getFlattenedHierarchy,
+        filter(hierarchyFunctions.isIndex)
+    ]);
+
+export const getRecordNodes = (hierarchy) => 
+    pipe(hierarchy, [
+        hierarchyFunctions.getFlattenedHierarchy,
+        filter(hierarchyFunctions.isIndex)
+    ]);
+
+export const getIndexSchema = hierarchy => index => 
+    generateSchema(hierarchy, index);

packages/builder/src/userInterface/ComponentSelector.svelte

@@ -0,0 +1,189 @@
+<script>
+import {
+    isRootComponent
+} from "./pagesParsing/searchComponents"
+import { splitName } from "./pagesParsing/splitRootComponentName.js"
+import { store } from "../builderStore";
+import {
+    groupBy, keys, find, sortBy
+} from "lodash/fp";
+import { pipe } from "../common/core";
+
+export let onComponentChosen;
+export let onGeneratorChosen;
+
+let derivedComponents=[];
+let componentLibraries=[];
+
+const addRootComponent = (c, all, isGenerator) => {
+    const { libName } = splitName(c.name);
+    let group = find(r => r.libName === libName)(all);
+
+    if(!group) {
+        group = {
+            libName,
+            components: [],
+            generators: []
+        };
+
+        all.push(group);
+    } 
+    
+    if(isGenerator) {
+        group.generators.push(c)
+    } else {
+        group.components.push(c)
+    }
+    
+};
+
+store.subscribe(s => {
+
+    const newComponentLibraries = [];
+    const newDerivedComponents = [];
+
+    for(let comp of sortBy(["name"])(s.allComponents)) {
+        if(isRootComponent(comp)) {
+            addRootComponent(
+                comp, 
+                newComponentLibraries, 
+                false);
+        } else {
+            newDerivedComponents.push(comp);
+        }
+    }
+
+    for(let generator of s.generators) {
+        addRootComponent(
+            generator, 
+            newComponentLibraries, 
+            true);
+    }
+
+    derivedComponents = sortBy(["name"])(newDerivedComponents);
+    componentLibraries = newComponentLibraries;
+});
+
+
+
+
+
+</script>
+
+{#each componentLibraries as lib}
+<div class="library-header">
+    {lib.libName}
+</div>
+
+<div class="library-container">
+
+    <div class="inner-header">
+        Generators
+    </div>
+
+    {#each lib.generators as generator}
+
+    <div class="component"
+         on:click={() => onGeneratorChosen(generator)}>
+        <div class="name">
+            {splitName(generator.name).componentName}
+        </div>
+        <div class="description">
+            {generator.description}
+        </div>
+    </div>
+
+    {/each}
+
+    <div class="inner-header">
+        Components
+    </div>
+
+    {#each lib.components as component}
+
+    <div class="component"
+         on:click={() => onComponentChosen(component)}>
+        <div class="name">
+            {splitName(component.name).componentName}
+        </div>
+        <div class="description">
+            {component.description}
+        </div>
+    </div>
+
+    {/each}
+
+</div>
+
+{/each}
+
+
+<div class="library-header">
+    My Components
+</div>
+
+<div class="library-container">
+
+    {#each derivedComponents as component}
+
+    <div class="component"
+         on:click={() => onComponentChosen(component)}>
+        <div class="name">
+            {component.name}
+        </div>
+        <div class="description">
+            {component.description}
+        </div>
+    </div>
+
+    {/each}
+
+</div>
+
+
+<style>
+
+.library-header {
+    font-size: 1.1em;
+    border-color: var(--primary25);
+    border-width: 1px 0px;
+    border-style: solid;
+    background-color: var(--primary10);
+    padding: 5px 0;
+}
+
+.library-container {
+    padding: 0 0 10px 10px;
+}
+
+.inner-header {
+    font-size: 0.9em;
+    font-weight: bold;
+    margin-top: 7px;
+    margin-bottom: 3px;
+}
+
+.component {
+    padding: 2px 0px;
+    cursor: pointer;
+}
+
+.component:hover {
+    background-color: var(--lightslate);
+}
+
+.component > .name {
+    color: var(--secondary100);
+    display: inline-block;
+}
+
+.component > .description {
+    font-size: 0.8em;
+    color: var(--secondary75);
+    display: inline-block;
+    margin-left: 10px;
+}
+
+
+
+</style>

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -11,19 +11,13 @@ import { getRootComponent } from "./pagesParsing/getRootComponent";
 import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
 
 
-let component;
+let hasComponent=false;
 let stylesheetLinks = "";
-let rootComponentName = "";
-let libraries;
-let allComponents;
 let appDefinition = {};
 
 store.subscribe(s => {
-    const {componentName, libName} = splitName(
-        s.currentComponentInfo.rootComponent.name);
-
-    rootComponentName = componentName;
-    component = s.libraries[libName][componentName];
+    hasComponent = !!s.currentFrontEndItem;
+    
     stylesheetLinks = pipe(s.pages.stylesheets, [
         map(s => `<link rel="stylesheet" href="${s}"/>`),
         join("\n")
@@ -32,8 +26,7 @@ store.subscribe(s => {
         componentLibraries: s.loadLibraryUrls(),
         props: buildPropsHierarchy(s.allComponents, s.currentFrontEndItem)
     };
-    libraries = s.libraries;
-    allComponents = s.allComponents;
+
 });
 
 
@@ -42,6 +35,7 @@ store.subscribe(s => {
 
 
 <div class="component-container">
+    {#if hasComponent}
     <iframe style="height: 100%; width: 100%"
             title="componentPreview"
             srcdoc={
@@ -68,6 +62,7 @@ store.subscribe(s => {
 </body>
 </html>`}>
     </iframe>
+    {/if}
 </div>
 
 

packages/builder/src/userInterface/EditComponent.svelte

@@ -66,7 +66,7 @@ const save = () => {
         return;
     }
 
-    component.name = originalName;
+    component.name = originalName || name;
     component.description = description;
     component.tags = pipe(tagsString, [
         split(","),

packages/builder/src/userInterface/GeneratedComponents.svelte

@@ -0,0 +1,159 @@
+<script>
+import { store } from "../builderStore";
+import { splitName } from "./pagesParsing/splitRootComponentName";
+import {
+    getIndexNodes, getRecordNodes, getIndexSchema
+} from "../common/core";
+import {
+    map, some, filter
+} from "lodash/fp";
+import Button from "../common/Button.svelte";
+import { componentDependencies } from "./pagesParsing/findDependencies";
+import { rename } from "./pagesParsing/renameComponent";
+import { getExactComponent } from "./pagesParsing/searchComponents";
+export let generator;
+export let onConfirmGenerate;
+
+let libName;
+let componentName;
+let libs;
+let existingComponents;
+let _generator;
+let components;
+let generateParameter;
+let allGeneratedComponents;
+let selectedComponents = [];
+
+store.subscribe(s => {
+    libs = s.generatorLibraries;
+    generateParameter = {
+        indexes: getIndexNodes(s.hierarchy),
+        records: getRecordNodes(s.hierarchy),
+        helpers: {
+            indexSchema: getIndexSchema(s.hierarchy)
+        }
+    }
+    existingComponents = s.allComponents;
+});
+
+const componentExists = name => 
+    getExactComponent(existingComponents, name);
+
+const componentsWithDependencies = () => {
+    
+    const cmp = map(c => {
+        const dependants = componentDependencies(
+            {}, selectedComponents, c);
+        return {
+            dependants: dependants.dependantComponents, 
+            component:c,
+            error: componentExists(c.name) ? "a component by this name already exists" : ""
+        };
+    })(allGeneratedComponents); 
+    components = cmp;
+} 
+
+$ : {
+    if(generator && generator !== _generator) {
+        _generator = generator;
+
+        const sp = splitName(generator.name);
+        libName = sp.libName;
+        componentName = sp.componentName;
+
+        allGeneratedComponents = libs[libName][componentName](generateParameter);
+        selectedComponents = [...allGeneratedComponents];
+        componentsWithDependencies();
+    }
+}
+
+
+const onSelectedChanged = component => ev => {
+    const newselectedComponents = filter(c => c.name !== component.component.name)(
+            selectedComponents);
+    if(ev.target.checked) {
+        newselectedComponents.push(component.component);   
+    }
+
+    selectedComponents = newselectedComponents;
+    componentsWithDependencies();
+}
+
+const onNameChanged = component => ev => {
+    const newname = ev.target.value;
+    const oldname = component.component.name;
+    const result = rename({}, allGeneratedComponents, oldname, newname);
+    component.error = result.error || "";
+    allGeneratedComponents = [...result.allComponents];
+    selectedComponents = map(s => {
+        if(s.name === oldname) s.name = newname;
+        return s;
+    })(selectedComponents);
+    componentsWithDependencies();
+}
+
+const isComponentSelected = component => 
+    some(c => c.name === component.component.name)(selectedComponents);
+
+</script>
+
+{#each components as c}
+
+<div class="component">
+
+    <div class="uk-inline">
+        <input type="checkbox" 
+               disabled={c.dependants.length > 0} 
+               class="uk-checkbox" 
+               checked={isComponentSelected(c)}
+               on:change={onSelectedChanged(c)}>
+        <input type="text" 
+               value={c.component.name} 
+               on:change={onNameChanged(c)}
+               class="uk-input title {c.error ? 'uk-form-danger' : ''}">
+        {#if isComponentSelected(c)}
+        <span class="error">{c.error}</span>
+        {/if}
+    </div>
+
+    <div class="description">
+        {c.component.description}
+    </div>
+
+</div>
+
+{/each}
+
+<div class="button-container">
+    <Button on:click={() => onConfirmGenerate(selectedComponents)}>Add Components</Button>
+</div>
+
+
+
+
+<style>
+
+.component {
+    padding: 5px 0;
+}
+
+.component .title {
+    width: 300px
+}
+
+.component > .description {
+    font-size: 0.8em;
+    color: var(--secondary75);
+}
+
+.button-container {
+    text-align: right;
+    margin-top: 20px;
+}
+
+.error {
+    font-size: 10pt;
+    color: red;
+}
+
+</style>

packages/builder/src/userInterface/NewComponent.svelte

@@ -1,6 +1,6 @@
 <script>
 
-import ComponentSearch from "./ComponentSearch.svelte";
+import ComponentSelector from "./ComponentSelector.svelte";
 import { store } from "../builderStore";
 import PropsView from "./PropsView.svelte";
 import Textbox from "../common/Textbox.svelte";
@@ -12,6 +12,7 @@ import {
     getNewComponentInfo
 } from "./pagesParsing/createProps";
 import { isRootComponent } from "./pagesParsing/searchComponents";
+import GeneratedComponents from "./GeneratedComponents.svelte";
 
 import { 
     cloneDeep, 
@@ -25,19 +26,23 @@ import { assign } from "lodash";
 
 
 
-let modalElement;
+let componentSelectorModal;
+let generatorOptionsModal;
 let allComponents;
+let generator;
 
 store.subscribe(s => {
     allComponents = s.allComponents;
 })
 
 export const close = () => {
-    UIkit.modal(modalElement).hide();
+    UIkit.modal(componentSelectorModal).hide();
+    if(generatorOptionsModal) UIkit.modal(generatorOptionsModal).hide();
+    generator = null;
 }
 
 export const show = () => {
-    UIkit.modal(modalElement).show();
+    UIkit.modal(componentSelectorModal).show();
 }
 
 const onComponentChosen = (c) => {
@@ -45,21 +50,53 @@ const onComponentChosen = (c) => {
     close();
 }
 
+const onGeneratorChosen = (g) => {
+    generator = g;
+    UIkit.modal(componentSelectorModal).hide();
+    UIkit.modal(generatorOptionsModal).show();
+}
+
+const onConfirmGenerate = (components) => {
+    store.createGeneratedComponents(components);
+    generator = null;
+}
+
 </script>
 
-<div bind:this={modalElement} id="new-component-modal" uk-modal>
-    <div class="uk-modal-dialog">
+<div bind:this={componentSelectorModal} id="new-component-modal" uk-modal>
+    <div class="uk-modal-dialog" uk-overflow-auto>
 
         <div class="uk-modal-header">
             <h1>New Component</h1>
         </div>
 
         <div class="uk-modal-body">
-            <ComponentSearch onComponentChosen={onComponentChosen} />
+            <ComponentSelector onComponentChosen={onComponentChosen}
+                               onGeneratorChosen={onGeneratorChosen} />
         </div>
     </div>
 </div>
 
+
+<div bind:this={generatorOptionsModal} uk-modal>
+    <div class="uk-modal-dialog" uk-overflow-auto>
+
+        {#if generator}
+        
+        <div class="uk-modal-header">
+            <h1>Generator - {generator ? generator.name : ""}</h1>
+        </div>
+
+        <div class="uk-modal-body">
+            <GeneratedComponents generator={generator}
+                                 onConfirmGenerate={onConfirmGenerate} />
+        </div>
+
+        {/if}
+    </div>
+</div>
+
+
 <style>
 h1 {
     font-size:1.2em;

packages/builder/src/userInterface/pagesParsing/findDependencies.js

@@ -1,7 +1,7 @@
 import { splitName } from "./splitRootComponentName";
 import {
-    find,
-    filter
+    find, filter, cloneDeep, isPlainObject,
+    isArray
 } from "lodash/fp";
 import { isRootComponent } from "./searchComponents";
 
@@ -21,4 +21,66 @@ export const libraryDependencies = (allComponents, lib) => {
                         && componentDependsOnLibrary(c))(
         allComponents
     );
+}
+
+export const componentDependencies = (pages, allComponents, dependsOn) => {
+
+    
+    pages = cloneDeep(pages);
+    allComponents = cloneDeep(allComponents);
+    const dependantComponents = [];
+    const dependantPages = [];
+
+    const traverseProps = (props) => {
+     
+        if(props._component && props._component === dependsOn.name) {
+            return true;
+        } 
+
+        for(let propName in props) {
+            const prop = props[propName];
+            if(isPlainObject(prop) && prop._component) {
+                if(traverseProps(prop)) return true;
+            }
+            if(isArray(prop)) {
+                for(let element of prop) {
+                    if(traverseProps(element)) return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+
+    for(let component of allComponents) {
+        
+        if(isRootComponent(component)) {
+            continue;
+        }
+
+        if(component.name === dependsOn.name) {
+            continue;
+        }
+
+        if(component.inherits === dependsOn.name) {
+            dependantComponents.push(component);
+            continue;
+        }
+        
+        if(traverseProps(component.props)) {
+            dependantComponents.push(component);
+        }
+
+    }
+
+    for(let pageName in pages) {
+        const page = pages[pageName];
+        if(page.appBody === dependsOn.name) {
+            dependantPages.push(pageName);
+        }
+    }
+
+    return {dependantComponents, dependantPages};
+
 }

packages/builder/tests/componentDependencies.spec.js

@@ -0,0 +1,64 @@
+import {
+    searchAllComponents, 
+    getExactComponent,
+    getAncestorProps
+} from "../src/userInterface/pagesParsing/searchComponents";
+import {
+    componentDependencies
+} from "../src/userInterface/pagesParsing/findDependencies";
+import { allComponents } from "./testData";
+import { some, find } from "lodash/fp"
+
+describe("component dependencies", () => {
+
+    const contains = (result, name) => 
+        some(c => c.name === name)(result);
+    
+    const get = (all, name) => 
+        find(c => c.name === name)(all);
+
+    it("should include component that inheirts", () => {
+
+        const components = allComponents();
+        
+        const result = componentDependencies(
+            {}, components, get(components, "budibase-components/TextBox"));
+
+        expect(contains(result.dependantComponents, "common/SmallTextbox")).toBe(true);
+
+    });
+
+    it("should include component that nests", () => {
+        const components = allComponents();
+        
+        const result = componentDependencies(
+            {}, components, get(components, "PrimaryButton"));
+
+        expect(contains(result.dependantComponents, "ButtonGroup")).toBe(true);
+
+    });
+
+    it("shouldinclude component that nests inside arrays", () => {
+        const components = allComponents();
+        
+        const result = componentDependencies(
+            {}, components, get(components, "common/PasswordBox"));
+
+        expect(contains(result.dependantComponents, "ButtonGroup")).toBe(true);
+    });
+
+
+    it("should include components n page apbody", () => {
+        const components = allComponents();
+        const pages = {
+            main: {
+                appBody: "PrimaryButton"
+            }
+        };
+        
+        const result = componentDependencies(
+            pages, components, get(components, "PrimaryButton"));
+
+        expect(result.dependantPages).toEqual(["main"]);
+    });
+})

packages/builder/tests/testData.js

@@ -85,6 +85,11 @@ export const allComponents = () => ([
                         _component: "PrimaryButton",
                         contentText: "Button 2"
                     }
+                },
+                {
+                    control: {
+                        _component: "common/PasswordBox",
+                    }
                 }
             ]
         }

packages/client/scripts/publishDev.js

@@ -44,6 +44,10 @@ const nodeModules = appName => join(appPackages, appName, "node_modules", "@budi
 
         await copySourceJs(publicUnauth(app));
         await copySourceJsMap(publicUnauth(app));
+
+        await copySource(
+            join("dist", "budibase-client.esm.mjs"))(
+            join(packagesFolder, "server", "builder" ));
     }
 
 })();

packages/client/src/createApp.js

@@ -66,11 +66,20 @@ export const createApp = (componentLibraries, appDefinition, user) => {
         delete:apiCall("DELETE")
     };
 
+    const safeCallEvent = (event, context) => {
+        
+        const isFunction = (obj) =>
+            !!(obj && obj.constructor && obj.call && obj.apply);
+
+        if(isFunction(event)) event(context);
+    }
+
     const bb = () => ({
         initialiseComponent: initialiseComponent(), 
         store,
         relativeUrl,
         api,
+        call:safeCallEvent,
         getStateOrValue: (prop, currentContext) => 
             getStateOrValue(globalState, prop, currentContext)
     });

packages/core/src/appInitialise/initialiseData.js

@@ -5,8 +5,7 @@ import { AUTH_FOLDER, USERS_LIST_FILE, ACCESS_LEVELS_FILE } from '../authApi/aut
 import { initialiseRootCollections } from '../collectionApi/initialise';
 import { initialiseIndex } from '../indexing/initialiseIndex';
 import { getFlattenedHierarchy, isGlobalIndex, isSingleRecord } from '../templateApi/hierarchy';
-import { _save } from '../recordApi/save';
-import { getNew } from '../recordApi/getNew';
+
 
 export const initialiseData = async (datastore, applicationDefinition, accessLevels) => {
   await datastore.createFolder(configFolder);

packages/server/appPackages/_master/access_levels.json

@@ -1,4 +1,6 @@
-[
+{ 
+"version":0,
+"levels":[
   {
     "name": "owner",
     "permissions": [
@@ -170,3 +172,4 @@
     ]
   }
 ]
+}

packages/server/appPackages/_master/components/Main View Switcher.json

@@ -0,0 +1,228 @@
+{
+  "name": "Main View Switcher",
+  "description": "",
+  "inherits": "@budibase/standard-components/nav",
+  "props": {
+    "items": [
+      {
+        "_component": "#items#array_element",
+        "title": "Apps List",
+        "component": {
+          "_component": "apps/Apps List",
+          "direction": "horizontal",
+          "children": [
+            {
+              "_component": "#children#array_element",
+              "control": {
+                "_component": "apps/Create App List Item",
+                "text": "Create New",
+                "component": {
+                  "_component": ""
+                },
+                "containerClass": "",
+                "background": "",
+                "border": "1px solid black",
+                "borderRadius": "2px",
+                "font": "",
+                "color": "",
+                "padding": "10px",
+                "margin": "20px",
+                "hoverColor": "",
+                "hoverBackground": "gainsboro",
+                "height": "100px",
+                "width": "100px",
+                "onClick": [
+                  {
+                    "##eventHandlerType": "Get New Record",
+                    "parameters": {
+                      "collectionKey": "/applications",
+                      "childRecordType": "application",
+                      "statePath": "currentApplication"
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          "width": "auto",
+          "height": "auto",
+          "containerClass": "",
+          "itemContainerClass": "",
+          "data": {
+            "##bbstate": "allApplications",
+            "##bbsource": "store"
+          },
+          "dataItemComponent": {
+            "_component": "apps/Application List Item",
+            "text": "",
+            "component": {
+              "_component": "@budibase/standard-components/stackpanel",
+              "children": [
+                {
+                  "_component": "#children#array_element",
+                  "control": {
+                    "_component": "@budibase/standard-components/text",
+                    "value": "",
+                    "containerClass": "",
+                    "font": "",
+                    "color": "",
+                    "textAlign": "inline",
+                    "verticalAlign": "inline",
+                    "display": "inline"
+                  }
+                }
+              ],
+              "width": "auto",
+              "height": "auto",
+              "containerClass": "",
+              "itemContainerClass": "",
+              "data": {
+                "##bbstate": ""
+              },
+              "dataItemComponent": {
+                "_component": ""
+              },
+              "onLoad": []
+            },
+            "containerClass": "",
+            "background": "",
+            "border": "1px solid dimgray",
+            "borderRadius": "2px",
+            "font": "",
+            "color": "black",
+            "padding": "10px",
+            "margin": "20px",
+            "hoverColor": "",
+            "hoverBackground": "",
+            "height": "",
+            "width": "",
+            "onClick": [
+              {
+                "##eventHandlerType": "Load Record",
+                "parameters": {
+                  "recordKey": {
+                    "##bbstate": "key",
+                    "##bbsource": "context"
+                  },
+                  "statePath": "currentApp"
+                }
+              }
+            ],
+            "display": "inline"
+          },
+          "onLoad": [
+            {
+              "##eventHandlerType": "List Records",
+              "parameters": {
+                "indexKey": "/all_applications",
+                "statePath": "allApplications"
+              }
+            }
+          ],
+          "component": {
+            "_component": "@budibase/standard-components/stackpanel",
+            "direction": "horizontal",
+            "children": [
+              {
+                "_component": "#children#array_element",
+                "control": {
+                  "_component": "@budibase/standard-components/text",
+                  "value": "",
+                  "containerClass": "",
+                  "font": "",
+                  "color": "",
+                  "textAlign": "inline",
+                  "verticalAlign": "inline",
+                  "display": "inline"
+                }
+              }
+            ],
+            "width": "auto",
+            "height": "auto",
+            "containerClass": "",
+            "itemContainerClass": "",
+            "data": {
+              "##bbstate": "allApplications",
+              "##bbsource": "store"
+            },
+            "dataItemComponent": {
+              "_component": "apps/Application List Item",
+              "text": {
+                "##bbstate": "name",
+                "##bbstatefallback": "My App Name",
+                "##bbsource": "context"
+              },
+              "component": {
+                "_component": "@budibase/standard-components/stackpanel",
+                "direction": "horizontal",
+                "children": [
+                  {
+                    "_component": "#children#array_element",
+                    "control": {
+                      "_component": "@budibase/standard-components/text",
+                      "value": "",
+                      "containerClass": "",
+                      "font": "",
+                      "color": "",
+                      "textAlign": "inline",
+                      "verticalAlign": "inline",
+                      "display": "inline"
+                    }
+                  }
+                ],
+                "width": "auto",
+                "height": "auto",
+                "containerClass": "",
+                "itemContainerClass": "",
+                "data": {
+                  "##bbstate": "allApplications",
+                  "##bbsource": "store"
+                },
+                "dataItemComponent": {
+                  "_component": ""
+                },
+                "onLoad": []
+              },
+              "containerClass": "",
+              "background": "",
+              "border": "1px solid dimgray",
+              "borderRadius": "2px",
+              "font": "",
+              "color": "black",
+              "padding": "10px",
+              "margin": "20px",
+              "hoverColor": "",
+              "hoverBackground": "",
+              "height": "",
+              "width": "",
+              "onClick": [
+                {
+                  "##eventHandlerType": "Load Record",
+                  "parameters": {
+                    "recordKey": {
+                      "##bbstate": "key",
+                      "##bbsource": "context"
+                    },
+                    "statePath": "currentApplication"
+                  }
+                }
+              ],
+              "display": ""
+            },
+            "onLoad": []
+          }
+        }
+      }
+    ],
+    "selectedItem": {
+      "##bbstate": "currentView",
+      "##bbstatefallback": "Apps List",
+      "##bbsource": "store"
+    }
+  },
+  "tags": [
+    "nav",
+    "navigation",
+    "sidebar"
+  ]
+}

packages/server/appPackages/_master/components/apps/App Form.json

@@ -0,0 +1,25 @@
+{
+  "name": "apps/App Form",
+  "description": "",
+  "inherits": "@budibase/standard-components/form",
+  "props": {
+    "formControls": [
+      {
+        "_component": "#formControls#array_element",
+        "label": "Name",
+        "control": {
+          "_component": "@budibase/standard-components/textbox",
+          "value": {
+            "##bbstate": "currentApplication.name",
+            "##bbsource": "store"
+          },
+          "hideValue": false,
+          "className": "default"
+        }
+      }
+    ]
+  },
+  "tags": [
+    "form"
+  ]
+}

packages/server/appPackages/_master/components/apps/Edit App .json

@@ -0,0 +1,37 @@
+{
+  "name": "apps/Edit App ",
+  "description": "",
+  "inherits": "@budibase/standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "#children#array_element",
+        "control": {
+          "_component": "apps/App Form",
+          "containerClass": "",
+          "formControls": [
+            {
+              "_component": "#formControls#array_element",
+              "label": "Name",
+              "control": {
+                "_component": "@budibase/standard-components/textbox",
+                "value": {
+                  "##bbstate": "currentApplication.name",
+                  "##bbsource": "store"
+                },
+                "hideValue": false,
+                "className": "default"
+              }
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/_master/public/main/budibase-client.js

@@ -20407,11 +20407,20 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
+	    const safeCallEvent = (event, context) => {
+	        
+	        const isFunction = (obj) =>
+	            !!(obj && obj.constructor && obj.call && obj.apply);
+
+	        if(isFunction(event)) event(context);
+	    };
+
 	    const bb = () => ({
 	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
+	        call:safeCallEvent,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
 	    });

packages/server/appPackages/_master/public/unauthenticated/budibase-client.js

@@ -20407,11 +20407,20 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
+	    const safeCallEvent = (event, context) => {
+	        
+	        const isFunction = (obj) =>
+	            !!(obj && obj.constructor && obj.call && obj.apply);
+
+	        if(isFunction(event)) event(context);
+	    };
+
 	    const bb = () => ({
 	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
+	        call:safeCallEvent,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
 	    });

packages/server/appPackages/testApp/public/main/budibase-client.js

@@ -20407,11 +20407,20 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
+	    const safeCallEvent = (event, context) => {
+	        
+	        const isFunction = (obj) =>
+	            !!(obj && obj.constructor && obj.call && obj.apply);
+
+	        if(isFunction(event)) event(context);
+	    };
+
 	    const bb = () => ({
 	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
+	        call:safeCallEvent,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
 	    });

packages/server/appPackages/testApp/public/unauthenticated/budibase-client.js

@@ -20407,11 +20407,20 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
+	    const safeCallEvent = (event, context) => {
+	        
+	        const isFunction = (obj) =>
+	            !!(obj && obj.constructor && obj.call && obj.apply);
+
+	        if(isFunction(event)) event(context);
+	    };
+
 	    const bb = () => ({
 	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
+	        call:safeCallEvent,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
 	    });

packages/server/appPackages/testApp2/access_levels.json

@@ -1,72 +1,75 @@
-[
-  {
-    "name": "owner",
-    "permissions": [
-      {
-        "type": "create record",
-        "nodeKey": "/customers/1-{id}"
-      },
-      {
-        "type": "delete record",
-        "nodeKey": "/customers/1-{id}"
-      },
-      {
-        "type": "update record",
-        "nodeKey": "/customers/1-{id}"
-      },
-      {
-        "type": "read record",
-        "nodeKey": "/customers/1-{id}"
-      },
-      {
-        "type": "create record",
-        "nodeKey": "/customers/1-{id}/invoices/2-{id}"
-      },
-      {
-        "type": "update record",
-        "nodeKey": "/customers/1-{id}/invoices/2-{id}"
-      },
-      {
-        "type": "delete record",
-        "nodeKey": "/customers/1-{id}/invoices/2-{id}"
-      },
-      {
-        "type": "read record",
-        "nodeKey": "/customers/1-{id}/invoices/2-{id}"
-      },
-      {
-        "type": "write templates"
-      },
-      {
-        "type": "create user"
-      },
-      {
-        "type": "set password"
-      },
-      {
-        "type": "create temporary access"
-      },
-      {
-        "type": "enable or disable user"
-      },
-      {
-        "type": "write access levels"
-      },
-      {
-        "type": "list users"
-      },
-      {
-        "type": "list access levels"
-      },
-      {
-        "type": "manage index"
-      },
-      {
-        "type": "set user access levels"
-      },
-      {
-        "type": "manage collection"
-      }
-    ]
-  }
-]
+{
+  "version": 0,
+  "levels": [
+    {
+      "name": "owner",
+      "permissions": [
+        {
+          "type": "create record",
+          "nodeKey": "/customers/1-{id}"
+        },
+        {
+          "type": "delete record",
+          "nodeKey": "/customers/1-{id}"
+        },
+        {
+          "type": "update record",
+          "nodeKey": "/customers/1-{id}"
+        },
+        {
+          "type": "read record",
+          "nodeKey": "/customers/1-{id}"
+        },
+        {
+          "type": "create record",
+          "nodeKey": "/customers/1-{id}/invoices/2-{id}"
+        },
+        {
+          "type": "update record",
+          "nodeKey": "/customers/1-{id}/invoices/2-{id}"
+        },
+        {
+          "type": "delete record",
+          "nodeKey": "/customers/1-{id}/invoices/2-{id}"
+        },
+        {
+          "type": "read record",
+          "nodeKey": "/customers/1-{id}/invoices/2-{id}"
+        },
+        {
+          "type": "write templates"
+        },
+        {
+          "type": "create user"
+        },
+        {
+          "type": "set password"
+        },
+        {
+          "type": "create temporary access"
+        },
+        {
+          "type": "enable or disable user"
+        },
+        {
+          "type": "write access levels"
+        },
+        {
+          "type": "list users"
+        },
+        {
+          "type": "list access levels"
+        },
+        {
+          "type": "manage index"
+        },
+        {
+          "type": "set user access levels"
+        },
+        {
+          "type": "manage collection"
+        }
+      ]
+    }
+  ]
+}

packages/server/appPackages/testApp2/appDefinition.json

@@ -157,74 +157,38 @@
   },
   "props": {
     "main": {
-      "_component": "@budibase/standard-components/grid",
-      "gridTemplateRows": "",
-      "gridTemplateColumns": "[left] 1fr [right] 1fr",
-      "children": [
-        {
-          "_component": "children#array_element#",
-          "control": {
-            "_component": "@budibase/standard-components/button",
-            "contentText": "Click Me",
-            "contentComponent": {
-              "_component": ""
-            },
-            "className": "default",
-            "disabled": false,
-            "onClick": [
-              {
-                "##eventHandlerType": "Set State",
-                "parameters": {
-                  "path": "SomeText",
-                  "value": "hello !"
-                }
-              }
-            ]
-          },
-          "gridColumn": "left",
-          "gridRow": "",
-          "gridColumnStart": "",
-          "gridColumnEnd": "",
-          "gridRowStart": "",
-          "gridRowEnd": ""
-        },
-        {
-          "_component": "children#array_element#",
-          "control": {
-            "_component": "@budibase/standard-components/button",
-            "contentText": {
-              "##bbstate": "SomeText",
-              "##bbstatefallback": "(none)"
-            },
-            "contentComponent": {
-              "_component": ""
-            },
-            "className": "default",
-            "disabled": false,
-            "onClick": []
-          },
-          "gridColumn": "",
-          "gridRow": "",
-          "gridColumnStart": "",
-          "gridColumnEnd": "",
-          "gridRowStart": "",
-          "gridRowEnd": ""
-        }
-      ],
-      "width": "auto",
-      "height": "auto",
-      "containerClass": "",
-      "itemContainerClass": ""
+      "_component": "@budibase/standard-components/button",
+      "contentText": "Button",
+      "contentComponent": {
+        "_component": ""
+      },
+      "className": "default",
+      "disabled": false,
+      "onClick": [],
+      "background": "##f2f2f2",
+      "color": "#5F6368",
+      "border": "1px solid #EEE",
+      "padding": "5px 7px",
+      "hoverColor": "black",
+      "hoverBackground": "#cccccc",
+      "hoverBorder": ""
     },
     "unauthenticated": {
-      "_component": "@budibase/standard-components/grid",
-      "gridTemplateRows": "",
-      "gridTemplateColumns": "[left] 1fr [right] 1fr",
-      "children": [],
-      "width": "auto",
-      "height": "auto",
-      "containerClass": "",
-      "itemContainerClass": ""
+      "_component": "@budibase/standard-components/button",
+      "contentText": "Button",
+      "contentComponent": {
+        "_component": ""
+      },
+      "className": "default",
+      "disabled": false,
+      "onClick": [],
+      "background": "##f2f2f2",
+      "color": "#5F6368",
+      "border": "1px solid #EEE",
+      "padding": "5px 7px",
+      "hoverColor": "black",
+      "hoverBackground": "#cccccc",
+      "hoverBorder": ""
     }
   }
 }

packages/server/appPackages/testApp2/components/Primary Button.json

@@ -1,29 +0,0 @@
-{
-  "name": "Primary Button",
-  "description": "",
-  "inherits": "@budibase/standard-components/button",
-  "props": {
-    "onClick": [
-      {
-        "##eventHandlerType": "Load Record",
-        "parameters": {
-          "recordKey": "waa",
-          "statePath": "yea"
-        }
-      },
-      {
-        "##eventHandlerType": "Load Record",
-        "parameters": {
-          "recordKey": "ttt",
-          "statePath": "eee"
-        }
-      }
-    ],
-    "contentText": {
-      "##bbstate": "yea"
-    }
-  },
-  "tags": [
-    "button"
-  ]
-}

packages/server/appPackages/testApp2/components/common/Prim Button.json

@@ -0,0 +1,13 @@
+{
+  "name": "common/Prim Button",
+  "description": "a styled button",
+  "inherits": "@budibase/standard-components/button",
+  "props": {
+    "padding": "5px 7px",
+    "border": "1px solid #EEE",
+    "color": "#5F6368",
+    "background": "##f2f2f2",
+    "hoverColor": "black",
+    "hoverBackground": "#cccccc"
+  }
+}

packages/server/appPackages/testApp2/components/common/Primary Button.json

@@ -0,0 +1,13 @@
+{
+  "name": "common/Primary Button",
+  "description": "a styled button",
+  "inherits": "@budibase/standard-components/button",
+  "props": {
+    "padding": "5px 7px",
+    "border": "1px solid #EEE",
+    "color": "#5F6368",
+    "background": "##f2f2f2",
+    "hoverColor": "black",
+    "hoverBackground": "#cccccc"
+  }
+}

packages/server/appPackages/testApp2/components/common/Secondary Button.json

@@ -0,0 +1,13 @@
+{
+  "name": "common/Secondary Button",
+  "description": "a styled button",
+  "inherits": "@budibase/standard-components/button",
+  "props": {
+    "padding": "5px 7px",
+    "border": "1px solid #EEE",
+    "color": "#5F6368",
+    "background": "##f2f2f2",
+    "hoverColor": "black",
+    "hoverBackground": "#cccccc"
+  }
+}

packages/server/appPackages/testApp2/components/containers_eh/two_columns_yes.json

@@ -1,15 +0,0 @@
-{
-  "name": "containers/two_columns_yes",
-  "description": "",
-  "inherits": "@budibase/standard-components/grid",
-  "props": {
-    "gridTemplateColumns": "[left] 1fr [right] 1fr"
-  },
-  "tags": [
-    "div",
-    "container",
-    "layout",
-    "panel",
-    "grid"
-  ]
-}

packages/server/appPackages/testApp2/components/mike.json

@@ -1,65 +0,0 @@
-{
-  "name": "mike",
-  "description": "",
-  "inherits": "containers_eh/two_columns_yes",
-  "props": {
-    "children": [
-      {
-        "_component": "#children#array_element",
-        "control": {
-          "_component": "@budibase/standard-components/button",
-          "contentText": "Click Me",
-          "contentComponent": {
-            "_component": ""
-          },
-          "className": "default",
-          "disabled": false,
-          "onClick": [
-            {
-              "##eventHandlerType": "Set State",
-              "parameters": {
-                "path": "SomeText",
-                "value": "hello !"
-              }
-            }
-          ]
-        },
-        "gridColumn": "left",
-        "gridRow": "",
-        "gridColumnStart": "",
-        "gridColumnEnd": "",
-        "gridRowStart": "",
-        "gridRowEnd": ""
-      },
-      {
-        "_component": "#children#array_element",
-        "control": {
-          "_component": "@budibase/standard-components/button",
-          "contentText": {
-            "##bbstate": "SomeText",
-            "##bbstatefallback": "(none)"
-          },
-          "contentComponent": {
-            "_component": ""
-          },
-          "className": "default",
-          "disabled": false,
-          "onClick": []
-        },
-        "gridColumn": "",
-        "gridRow": "",
-        "gridColumnStart": "",
-        "gridColumnEnd": "",
-        "gridRowStart": "",
-        "gridRowEnd": ""
-      }
-    ]
-  },
-  "tags": [
-    "div",
-    "container",
-    "layout",
-    "panel",
-    "grid"
-  ]
-}

packages/server/appPackages/testApp2/pages.json

@@ -3,13 +3,13 @@
     "index": {
       "title": "main yeo"
     },
-    "appBody": "mike"
+    "appBody": "common/Prim Button"
   },
   "unauthenticated": {
     "index": {
       "title": "main"
     },
-    "appBody": "containers/two_columns"
+    "appBody": "common/Secondary Button"
   },
   "componentLibraries": [
     "@budibase/standard-components"

packages/server/appPackages/testApp2/public/main/budibase-client.js

@@ -20407,11 +20407,20 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
+	    const safeCallEvent = (event, context) => {
+	        
+	        const isFunction = (obj) =>
+	            !!(obj && obj.constructor && obj.call && obj.apply);
+
+	        if(isFunction(event)) event(context);
+	    };
+
 	    const bb = () => ({
 	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
+	        call:safeCallEvent,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
 	    });

packages/server/appPackages/testApp2/public/main/clientAppDefinition.js

@@ -1 +1 @@
-window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[{"name":"customer_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":5}],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[{"name":"Yeo index","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[1],"nodeId":4},{"name":"everyones_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":6}],"nodeId":0},"componentLibraries":[{"importPath":"/lib/node_modules/@budibase/standard-components/dist/index.js","libName":"@budibase/standard-components"}],"appRootPath":"/testApp2","props":{"_component":"@budibase/standard-components/grid","gridTemplateRows":"","gridTemplateColumns":"[left] 1fr [right] 1fr","children":[{"_component":"children#array_element#","control":{"_component":"@budibase/standard-components/button","contentText":"Click Me","contentComponent":{"_component":""},"className":"default","disabled":false,"onClick":[{"##eventHandlerType":"Set State","parameters":{"path":"SomeText","value":"hello !"}}]},"gridColumn":"left","gridRow":"","gridColumnStart":"","gridColumnEnd":"","gridRowStart":"","gridRowEnd":""},{"_component":"children#array_element#","control":{"_component":"@budibase/standard-components/button","contentText":{"##bbstate":"SomeText","##bbstatefallback":"(none)"},"contentComponent":{"_component":""},"className":"default","disabled":false,"onClick":[]},"gridColumn":"","gridRow":"","gridColumnStart":"","gridColumnEnd":"","gridRowStart":"","gridRowEnd":""}],"width":"auto","height":"auto","containerClass":"","itemContainerClass":""}}
+window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[{"name":"customer_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":5}],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[{"name":"Yeo index","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[1],"nodeId":4},{"name":"everyones_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":6}],"nodeId":0},"componentLibraries":[{"importPath":"/lib/node_modules/@budibase/standard-components/dist/index.js","libName":"@budibase/standard-components"}],"appRootPath":"/testApp2","props":{"_component":"@budibase/standard-components/button","contentText":"Button","contentComponent":{"_component":""},"className":"default","disabled":false,"onClick":[],"background":"##f2f2f2","color":"#5F6368","border":"1px solid #EEE","padding":"5px 7px","hoverColor":"black","hoverBackground":"#cccccc","hoverBorder":""}}

packages/server/appPackages/testApp2/public/unauthenticated/budibase-client.js

@@ -20407,11 +20407,20 @@ var app = (function (exports) {
 	        delete:apiCall("DELETE")
 	    };
 
+	    const safeCallEvent = (event, context) => {
+	        
+	        const isFunction = (obj) =>
+	            !!(obj && obj.constructor && obj.call && obj.apply);
+
+	        if(isFunction(event)) event(context);
+	    };
+
 	    const bb = () => ({
 	        initialiseComponent: initialiseComponent(), 
 	        store,
 	        relativeUrl,
 	        api,
+	        call:safeCallEvent,
 	        getStateOrValue: (prop, currentContext) => 
 	            getStateOrValue(globalState, prop, currentContext)
 	    });

packages/server/appPackages/testApp2/public/unauthenticated/clientAppDefinition.js

@@ -1 +1 @@
-window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[{"name":"customer_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":5}],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[{"name":"Yeo index","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[1],"nodeId":4},{"name":"everyones_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":6}],"nodeId":0},"componentLibraries":[{"importPath":"/lib/node_modules/@budibase/standard-components/dist/index.js","libName":"@budibase/standard-components"}],"appRootPath":"/testApp2","props":{"_component":"@budibase/standard-components/grid","gridTemplateRows":"","gridTemplateColumns":"[left] 1fr [right] 1fr","children":[],"width":"auto","height":"auto","containerClass":"","itemContainerClass":""}}
+window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[{"name":"customer_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":5}],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[{"name":"Yeo index","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[1],"nodeId":4},{"name":"everyones_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":6}],"nodeId":0},"componentLibraries":[{"importPath":"/lib/node_modules/@budibase/standard-components/dist/index.js","libName":"@budibase/standard-components"}],"appRootPath":"/testApp2","props":{"_component":"@budibase/standard-components/button","contentText":"Button","contentComponent":{"_component":""},"className":"default","disabled":false,"onClick":[],"background":"##f2f2f2","color":"#5F6368","border":"1px solid #EEE","padding":"5px 7px","hoverColor":"black","hoverBackground":"#cccccc","hoverBorder":""}}

packages/server/builder/bundle.css

@@ -2,46 +2,49 @@ main.svelte-15fmzor{height:100%;width:100%;font-family:"Roboto", Helvetica, Aria
 .root.svelte-e4n7zy{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-e4n7zy{display:inline-block;margin:auto}.logo.svelte-e4n7zy{width:300px;margin-bottom:40px}.root.svelte-e4n7zy .option{width:250px}.app-link.svelte-e4n7zy{margin-top:10px;display:block}
 .root.svelte-y7jhgd{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-y7jhgd{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-y7jhgd{flex:1 1 auto;width:100%;height:100px}.content.svelte-y7jhgd>div.svelte-y7jhgd{height:100%;width:100%}.topnavitem.svelte-y7jhgd{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-y7jhgd:hover{color:var(--secondary75);font-weight:600}.active.svelte-y7jhgd{color:var(--primary100);font-weight:900}
 button.svelte-bxuckr{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-bxuckr:hover{color:var(--hovercolor)}button.svelte-bxuckr:active{outline:none}
-.root.svelte-rjo9m0{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-rjo9m0{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-rjo9m0{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-rjo9m0{padding-top:2rem}.components-nav-header.svelte-rjo9m0{font-size:.9rem}.nav-group-header.svelte-rjo9m0{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-rjo9m0{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-rjo9m0{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-rjo9m0>span.svelte-rjo9m0:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3):hover{color:var(--primary75)}
-.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)}
 .root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%}
-h1.svelte-16jkjx9{font-size:1.2em}
-.root.svelte-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px}
-.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon}
-.root.svelte-1r2dipt{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1r2dipt{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1r2dipt:hover{color:var(--secondary)}.component.svelte-1r2dipt{margin-left:5px}.currentfolder.svelte-1r2dipt{color:var(--secondary100)}.selected.svelte-1r2dipt{color:var(--primary100);font-weight:bold}.title.svelte-1r2dipt{margin-left:10px}
-.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem}
-.component-container.svelte-teqoiq{grid-row-start:middle;grid-column-start:middle;position:relative;overflow:hidden;padding-top:56.25%;margin:auto}.component-container.svelte-teqoiq iframe.svelte-teqoiq{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
+.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)}
+.root.svelte-rjo9m0{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-rjo9m0{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-rjo9m0{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-rjo9m0{padding-top:2rem}.components-nav-header.svelte-rjo9m0{font-size:.9rem}.nav-group-header.svelte-rjo9m0{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-rjo9m0{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-rjo9m0{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-rjo9m0>span.svelte-rjo9m0:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3):hover{color:var(--primary75)}
 h4.svelte-sqtlby{margin-top:20px}
-.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
-.root.svelte-1abif7s{height:100%;display:flex;flex-direction:column}.padding.svelte-1abif7s{padding:1rem 1rem 0rem 1rem}.info-text.svelte-1abif7s{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-1abif7s{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(2){grid-column-start:actions}.section-header.svelte-1abif7s{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-1abif7s{flex:1 1 auto;overflow-y:auto}
-.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem}
 .items-root.svelte-19lmivt{display:flex;flex-direction:column;max-height:100%;height:100%;background-color:var(--secondary5)}.nav-group-header.svelte-19lmivt{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-19lmivt{flex:auto 1 1}.hierarchy.svelte-19lmivt{display:flex;flex-direction:column;flex:1 0 auto;height:100px}.hierarchy-items-container.svelte-19lmivt{flex:1 1 auto;overflow-y:auto}
 .root.svelte-wfv60d{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-wfv60d{flex:0 1 auto}.node-view.svelte-wfv60d{overflow-y:auto;flex:1 1 auto}
 .root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto}
-.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0}
-.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
-.root.svelte-47ohpz{font-size:10pt}.padding.svelte-47ohpz{padding:0 10px}.inherited-title.svelte-47ohpz{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
-.info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)}
-.title.svelte-dhe1ge{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-dhe1ge>span.svelte-dhe1ge{margin-left:10px}
+.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem}
+.root.svelte-1r2dipt{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1r2dipt{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1r2dipt:hover{color:var(--secondary)}.component.svelte-1r2dipt{margin-left:5px}.currentfolder.svelte-1r2dipt{color:var(--secondary100)}.selected.svelte-1r2dipt{color:var(--primary100);font-weight:bold}.title.svelte-1r2dipt{margin-left:10px}
+.root.svelte-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px}
+.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem}
+h1.svelte-16jkjx9{font-size:1.2em}
+.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon}
+.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
+.component-container.svelte-teqoiq{grid-row-start:middle;grid-column-start:middle;position:relative;overflow:hidden;padding-top:56.25%;margin:auto}.component-container.svelte-teqoiq iframe.svelte-teqoiq{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
+.root.svelte-1abif7s{height:100%;display:flex;flex-direction:column}.padding.svelte-1abif7s{padding:1rem 1rem 0rem 1rem}.info-text.svelte-1abif7s{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-1abif7s{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(2){grid-column-start:actions}.section-header.svelte-1abif7s{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-1abif7s{flex:1 1 auto;overflow-y:auto}
 .root.svelte-17ju2r{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-17ju2r{padding-top:.5rem;padding-right:.5rem}.title.svelte-17ju2r:hover{background-color:var(--secondary10)}.active.svelte-17ju2r{background-color:var(--primary10)}
-.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{background-color:var(--primary10)}
 .dropdown-background.svelte-11ifkop{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-11ifkop{cursor:pointer;z-index:1}.dropdown-content.svelte-11ifkop{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-11ifkop:not(:focus){display:none}.action-row.svelte-11ifkop{padding:7px 10px;cursor:pointer}.action-row.svelte-11ifkop:hover{background-color:var(--primary100);color:var(--white)}
 .edit-button.svelte-zm41av{cursor:pointer;color:var(--secondary25)}.title.svelte-zm41av{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-zm41av{font-weight:500;font-size:.9rem}tr.svelte-zm41av:hover .edit-button.svelte-zm41av{color:var(--secondary75)}
-.root.svelte-18xd5y3{height:100%;padding:2rem}.settings-title.svelte-18xd5y3{font-weight:700}.title.svelte-18xd5y3{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-18xd5y3{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-18xd5y3{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-18xd5y3{cursor:pointer}.edit-button.svelte-18xd5y3{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-18xd5y3:hover{cursor:pointer;color:var(--secondary75)}th.svelte-18xd5y3{text-align:left}td.svelte-18xd5y3{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-18xd5y3{font-size:14px;font-weight:500}thead.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-18xd5y3>tr.svelte-18xd5y3:hover{background-color:var(--primary10)}tbody.svelte-18xd5y3>tr:hover .edit-button.svelte-18xd5y3{color:var(--secondary75)}.index-container.svelte-18xd5y3{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-18xd5y3{color:var(--slate)}.index-name.svelte-18xd5y3{font-weight:bold;color:var(--primary100)}.index-container.svelte-18xd5y3 code.svelte-18xd5y3{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
-.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right}
-.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
+.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{background-color:var(--primary10)}
 .edit-button.svelte-lhfdtn{cursor:pointer;color:var(--secondary25)}tr.svelte-lhfdtn:hover .edit-button.svelte-lhfdtn{color:var(--secondary75)}.title.svelte-lhfdtn{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-lhfdtn{font-weight:500;font-size:.9rem}
+.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0}
 .root.svelte-ehsf0i{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-ehsf0i{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-ehsf0i:hover{background-color:var(--secondary10)}
-input.svelte-9fre0g{margin-right:7px}
-.root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
-.root.svelte-ogh8o0{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(2){grid-column-start:actions}.selectedname.svelte-ogh8o0{font-weight:bold;color:var(--secondary)}
-.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px}
+.root.svelte-18xd5y3{height:100%;padding:2rem}.settings-title.svelte-18xd5y3{font-weight:700}.title.svelte-18xd5y3{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-18xd5y3{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-18xd5y3{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-18xd5y3{cursor:pointer}.edit-button.svelte-18xd5y3{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-18xd5y3:hover{cursor:pointer;color:var(--secondary75)}th.svelte-18xd5y3{text-align:left}td.svelte-18xd5y3{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-18xd5y3{font-size:14px;font-weight:500}thead.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-18xd5y3>tr.svelte-18xd5y3:hover{background-color:var(--primary10)}tbody.svelte-18xd5y3>tr:hover .edit-button.svelte-18xd5y3{color:var(--secondary75)}.index-container.svelte-18xd5y3{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-18xd5y3{color:var(--slate)}.index-name.svelte-18xd5y3{font-weight:bold;color:var(--primary100)}.index-container.svelte-18xd5y3 code.svelte-18xd5y3{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
+.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
+.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right}
+.library-header.svelte-chhyel{font-size:1.1em;border-color:var(--primary25);border-width:1px 0px;border-style:solid;background-color:var(--primary10);padding:5px 0}.library-container.svelte-chhyel{padding:0 0 10px 10px}.inner-header.svelte-chhyel{font-size:0.9em;font-weight:bold;margin-top:7px;margin-bottom:3px}.component.svelte-chhyel{padding:2px 0px;cursor:pointer}.component.svelte-chhyel:hover{background-color:var(--lightslate)}.component.svelte-chhyel>.name.svelte-chhyel{color:var(--secondary100);display:inline-block}.component.svelte-chhyel>.description.svelte-chhyel{font-size:0.8em;color:var(--secondary75);display:inline-block;margin-left:10px}
+.info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)}
+.root.svelte-47ohpz{font-size:10pt}.padding.svelte-47ohpz{padding:0 10px}.inherited-title.svelte-47ohpz{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
+.title.svelte-dhe1ge{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-dhe1ge>span.svelte-dhe1ge{margin-left:10px}
+.component.svelte-3sgo90{padding:5px 0}.component.svelte-3sgo90 .title.svelte-3sgo90{width:300px
+}.component.svelte-3sgo90>.description.svelte-3sgo90{font-size:0.8em;color:var(--secondary75)}.button-container.svelte-3sgo90{text-align:right;margin-top:20px}.error.svelte-3sgo90{font-size:10pt;color:red}
 .root.svelte-16sjty9{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-16sjty9{padding:1rem}.option-container.svelte-16sjty9{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
 textarea.svelte-di7k4b{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px}
-.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)}
+.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px}
+input.svelte-9fre0g{margin-right:7px}
+.root.svelte-ogh8o0{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(2){grid-column-start:actions}.selectedname.svelte-ogh8o0{font-weight:bold;color:var(--secondary)}
+.root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
+textarea.svelte-1kv2xk7{width:300px;height:200px}
+.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
 .addelement-container.svelte-199q8jr{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-199q8jr:hover{background-color:var(--primary25)}.item-container.svelte-199q8jr{padding-left:3px;background:var(--secondary10)}
 .unbound-container.svelte-jubmd5{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-jubmd5>.svelte-jubmd5:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-jubmd5{display:flex}.bound-header.svelte-jubmd5>div.svelte-jubmd5:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-jubmd5{color:var(--secondary50)}
-textarea.svelte-1kv2xk7{width:300px;height:200px}
+.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)}
 .type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto}
 
 /*# sourceMappingURL=bundle.css.map */

packages/server/middleware/routers.js

@@ -74,6 +74,13 @@ module.exports = (config, app) => {
             ctx.query.lib);
         await send(ctx, info.components._lib || "index.js", { root: info.libDir});
     })
+    .get("/_builder/:appname/componentLibraryGenerators", async (ctx) => {
+        const info = await componentLibraryInfo(
+            config,
+            ctx.params.appname,
+            ctx.query.lib);
+        await send(ctx, info.generators._lib || "generators.js", { root: info.libDir});
+    })
     .get("/_builder/*", async (ctx, next) => {
         if(!config.dev) {
             ctx.response.status = StatusCodes.FORBIDDEN;
@@ -179,6 +186,14 @@ module.exports = (config, app) => {
         ctx.body = info.components;
         ctx.response.status = StatusCodes.OK;
     })
+    .get("/_builder/api/:appname/generators", async (ctx) => {
+        const info = await componentLibraryInfo(
+            config,
+            ctx.params.appname,
+            ctx.query.lib ? decodeURI(ctx.query.lib) : "");
+        ctx.body = info.generators;
+        ctx.response.status = StatusCodes.OK;
+    })
     .post("/_builder/api/:appname/derivedcomponent", async (ctx) => {
         await saveDerivedComponent(
             config,

packages/server/utilities/builder/componentLibraryInfo.js

@@ -37,13 +37,26 @@ module.exports.componentLibraryInfo = async (appPath, libname) => {
         const components = await readJSON(componentsPath);
         const namespacedComponents = {_lib:components._lib};
         for(let cname in components) {
-            if(cname === "_lib") continue;
+            if(cname === "_lib" || cname == "_generators") continue;
             const namespacedName = `${libname}/${cname}`;
             components[cname].name = namespacedName;
             namespacedComponents[namespacedName] = components[cname];
         }
+
+        const namespacedGenerators = {}
+        if(components._generators) {
+            namespacedGenerators._lib=components._generators._lib || "generators.js";
+            for(let gname in components._generators) {
+                if(gname === "_lib") continue;
+                const namespacedName = `${libname}/${gname}`;
+                components._generators[gname].name = namespacedName;
+                namespacedGenerators[namespacedName] = components._generators[gname];
+            }
+        }
+
         return ({
             components: namespacedComponents,
+            generators: namespacedGenerators,
             libDir,
             componentsPath
         });

packages/server/utilities/builder/index.js

@@ -111,14 +111,18 @@ const getRootComponents = async (appPath, pages ,lib) => {
     }
 
     const components = {};
+    const generators = {};
+
     for(let l of libs) {
         const info = await componentLibraryInfo(appPath, l);
         merge(components, info.components);
+        merge(generators, info.generators);
     }
 
     if(components._lib) delete components._lib;
+    if(components._generators) delete components._generators;
     
-    return components;
+    return {components, generators};
 }
 
 const fetchDerivedComponents = async (appPath, relativePath = "") => {

packages/standard-components/components.json

@@ -1,5 +1,32 @@
 {
 	"_lib": "./dist/index.js",
+	"_generators": {
+		"_lib": "./dist/generators.js",
+		"app": {
+			"name": "App",
+			"description": "Generate app based on your backend"
+		},
+		"forms": {
+			"name": "Forms",
+			"description": "Generate forms, based on your records"
+		},
+		"buttons": {
+			"name": "Buttons",
+			"description": "Generate some styled buttons"
+		},
+		"headers": {
+			"name": "Headers",
+			"description": "Generate some styled headings"
+		},
+		"nav": {
+			"name": "Nav bar",
+			"description": "Generate a nav bar, based n your root records"
+		},
+		"indexTables": {
+			"name": "Nav bar",
+			"description": "Generate a table based on an index"
+		}
+	},
 	"button" : {
 		"importPath": "button",
 		"name": "Button",
@@ -9,14 +36,21 @@
 			"contentComponent": "component",
 			"className": {"type": "string", "default": "default"},
 			"disabled": "bool",
-			"onClick": "event"
+			"onClick": "event",
+			"background": "string",
+			"color": "string",
+			"border": "string",
+			"padding": "string",
+			"hoverColor": "string",
+			"hoverBackground": "string",
+			"hoverBorder": "string"
 		},
 		"tags": ["button"]
 	}, 
 	"login" : {
 		"importPath": "Login",
 		"name": "Login Control",
-		"desciption": "A control that accepts username, password an also handles password resets",
+		"description": "A control that accepts username, password an also handles password resets",
 		"props" : {
 			"logo": "asset",
 			"loginRedirect": "string",
@@ -31,7 +65,7 @@
 	"form" : {
 		"importPath": "Form",
 		"name": "Form",
-		"desciption": "A form - allgned fields with labels",
+		"description": "A form - allgned fields with labels",
 		"props" : {
 			"containerClass": "string",
 			"formControls": {
@@ -47,10 +81,10 @@
 	"textbox" : {
 		"importPath": "Textbox",
 		"name": "Textbox",
-		"desciption": "An input type=text or password",
+		"description": "An input type=text or password",
 		"props" : {
 			"value": "string",
-			"hideValue": "boolean",
+			"hideValue": "bool",
 			"className": {"type": "string", "default": "default"}
 		},
 		"tags": ["form"]
@@ -58,7 +92,7 @@
 	"stackpanel": {
 		"importPath": "StackPanel",
 		"name": "StackPanel",
-		"desciption": "Layout elements in a stack, either horizontally or vertically",
+		"description": "Layout elements in a stack, either horizontally or vertically",
 		"props" : {
 			"direction": {
 				"type": "options", 
@@ -84,7 +118,7 @@
 	"grid": {
 		"importPath": "Grid",
 		"name": "Grid",
-		"desciption": "CSS Grid layout ",
+		"description": "CSS Grid layout ",
 		"props" : {
 			"gridTemplateRows": "string",
 			"gridTemplateColumns": "string",
@@ -110,7 +144,7 @@
 	"text": {
 		"importPath": "Text",
 		"name": "Text",
-		"desciption": "stylable block of text",
+		"description": "stylable block of text",
 		"props" : {
 			"value": "string",
 			"containerClass": "string",
@@ -143,7 +177,7 @@
 	"panel": {
 		"importPath": "Panel",
 		"name": "Panel",
-		"desciption": "A stylable div with a component inside",
+		"description": "A stylable div with a component inside",
 		"props" : {
 			"text": "string",
 			"component": "component",
@@ -173,7 +207,7 @@
 	"nav": {
 		"importPath": "Nav",
 		"name": "Nav",
-		"desciption": "A nav - a side bar of buttons that control the currently active component",
+		"description": "A nav - a side bar of buttons that control the currently active component",
 		"props" : {
 			"navBarBackground": {"type" :"string", "default":"silver"},
 			"navBarBorder": "string",
@@ -199,7 +233,7 @@
 	"table": {
 		"importPath": "Table",
 		"name": "Table",
-		"desciption": "An HTML table",
+		"description": "An HTML table",
 		"props" : {
 			"data": "state",
 			"columns": {

packages/standard-components/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && rollup -c rollup.generatorsconfig.js",
     "prepublishOnly": "npm run build",
     "testbuild": "rollup -w -c rollup.testconfig.js",
     "dev": "run-p start:dev testbuild",

packages/standard-components/public/bundle.css

@@ -1,13 +1,13 @@
 #current_component.svelte-1xqz9vm{height:100%;width:100%}
-.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
+.root.svelte-10kw8to{display:grid}
 .root.svelte-crnq0a{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-crnq0a{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-crnq0a{margin-bottom:20px
 }.logo-container.svelte-crnq0a>img.svelte-crnq0a{max-width:100%}.login-button-container.svelte-crnq0a{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-crnq0a{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-crnq0a{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-crnq0a{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-crnq0a{grid-column-start:control;padding:5px 10px}.default-input.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default-button.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default-button.svelte-crnq0a:active{background-color:#ddd}.default-button.svelte-crnq0a:focus{border-color:#666}
-.root.svelte-10kw8to{display:grid}
-.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
-.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer}
+.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
 .root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content}
-.horizontal.svelte-osi0db{display:inline-block}.vertical.svelte-osi0db{display:block}
+.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
 .panel.svelte-6yfcjx:hover{background:var(--hoverBackground);color:var(--hoverColor)}
+.horizontal.svelte-osi0db{display:inline-block}.vertical.svelte-osi0db{display:block}
+.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer}
 .default.svelte-1q8lga0{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666}
 
 /*# sourceMappingURL=bundle.css.map */

packages/standard-components/public/bundle.css.map

@@ -3,28 +3,28 @@
   "file": "bundle.css",
   "sources": [
     "..\\src\\Test\\TestApp.svelte",
-    "..\\src\\Form.svelte",
-    "..\\src\\Login.svelte",
     "..\\src\\Grid.svelte",
-    "..\\src\\Textbox.svelte",
-    "..\\src\\Table.svelte",
+    "..\\src\\Login.svelte",
+    "..\\src\\Form.svelte",
     "..\\src\\Nav.svelte",
-    "..\\src\\StackPanel.svelte",
+    "..\\src\\Textbox.svelte",
     "..\\src\\Panel.svelte",
+    "..\\src\\StackPanel.svelte",
+    "..\\src\\Table.svelte",
     "..\\src\\Button.svelte"
   ],
   "sourcesContent": [
     "<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _bb;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _bb = a);\n\nconst testProps = props.hiddenNav;\n\nlet currentComponent;\n\n$: {\n    if(_bb && currentComponent) {\n        _bb.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _bb}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n    height: 100%;\n    width: 100%;\n}\n</style>\n\n",
-    "<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _bb;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n    let cIndex = 0;\n    for(let c of formControls) {\n        labels[cIndex] = c.label;\n        cIndex++;\n    }\n\n    if(_bb && htmlElements) {\n        for(let el in htmlElements) {\n            _bb.initialiseComponent(\n                formControls[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n    {#each formControls as child, index}\n    <div class=\"label\">{labels[index]}</div>\n    <div class=\"control\"\n        bind:this={htmlElements[index]}>\n    </div>\n    {/each}\n</div>\n\n<style>\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n.overflow {\n    grid-column-start: overflow;\n}\n.full-width {\n    width: 100%;\n}\n</style>",
-    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\nexport let inputClass=\"\"\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\nlet _logo = \"\";\nlet _buttonClass = \"\";\nlet _inputClass = \"\";\n\n$: {\n    _logo = _bb.relativeUrl(logo);\n    _buttonClass = buttonClass || \"default-button\";\n    _inputClass = inputClass || \"default-input\";\n}\n\nconst login = () => {\n    busy = true;\n    _bb.api.post(\"/api/authenticate\", {username, password})\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            return r.json();\n        } else {\n            incorrect = true;\n            return;\n        }\n    })\n    .then(user => {\n        if(user) {\n            localStorage.setItem(\"budibase:user\", user);\n            location.reload();\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if _logo}\n        <div class=\"logo-container\">\n            <img src={_logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={username} type=\"text\" class={_inputClass}/>\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={password} type=\"password\" class={_inputClass}/>\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <button disabled={busy} \n                    on:click={login}\n                    class={_buttonClass}>\n                    {loginButtonLabel}\n            </button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n.default-input {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default-button {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default-button:active {\n\tbackground-color: #ddd;\n}\n\n.default-button:focus {\n\tborder-color: #666;\n}\n\n</style>",
     "<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _bb;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_bb && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _bb.initialiseComponent(\r\n                children[el].control,\r\n                htmlElements[el]\r\n            );\r\n        }\r\n    }\r\n}\r\n\r\nconst childStyle = child => \r\n    buildStyle({\r\n        \"grid-column-start\": child.gridColumnStart,\r\n        \"grid-column-end\": child.gridColumnEnd,\r\n        \"grid-column\": child.gridColumn,\r\n        \"grid-row-start\": child.gridRowStart,\r\n        \"grid-row-end\": child.gridRowStart,\r\n        \"grid-row\": child.gridRow,\r\n    });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n     style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n    {#each children as child, index}\r\n    <div class=\"{itemContainerClass}\"\r\n        style={childStyle(child)}\r\n        bind:this={htmlElements[index]}>\r\n    </div>\r\n    {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    display: grid;\r\n}\r\n\r\n</style>",
+    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\nexport let inputClass=\"\"\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\nlet _logo = \"\";\nlet _buttonClass = \"\";\nlet _inputClass = \"\";\n\n$: {\n    _logo = _bb.relativeUrl(logo);\n    _buttonClass = buttonClass || \"default-button\";\n    _inputClass = inputClass || \"default-input\";\n}\n\nconst login = () => {\n    busy = true;\n    _bb.api.post(\"/api/authenticate\", {username, password})\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            return r.json();\n        } else {\n            incorrect = true;\n            return;\n        }\n    })\n    .then(user => {\n        if(user) {\n            localStorage.setItem(\"budibase:user\", user);\n            location.reload();\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if _logo}\n        <div class=\"logo-container\">\n            <img src={_logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={username} type=\"text\" class={_inputClass}/>\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <input bind:value={password} type=\"password\" class={_inputClass}/>\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <button disabled={busy} \n                    on:click={login}\n                    class={_buttonClass}>\n                    {loginButtonLabel}\n            </button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n.default-input {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default-button {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default-button:active {\n\tbackground-color: #ddd;\n}\n\n.default-button:focus {\n\tborder-color: #666;\n}\n\n</style>",
+    "<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _bb;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n    let cIndex = 0;\n    for(let c of formControls) {\n        labels[cIndex] = c.label;\n        cIndex++;\n    }\n\n    if(_bb && htmlElements) {\n        for(let el in htmlElements) {\n            _bb.initialiseComponent(\n                formControls[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n    {#each formControls as child, index}\n    <div class=\"label\">{labels[index]}</div>\n    <div class=\"control\"\n        bind:this={htmlElements[index]}>\n    </div>\n    {/each}\n</div>\n\n<style>\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n.overflow {\n    grid-column-start: overflow;\n}\n.full-width {\n    width: 100%;\n}\n</style>",
+    "<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = [];\r\nexport let hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex = -1;\r\nlet styleVars={};\r\nlet components = {};\r\nlet componentElements = {}\r\n\r\n\r\nconst hasComponentElements = () => \r\n    Object.getOwnPropertyNames(componentElements).length > 0;\r\n\r\n$: {\r\n    styleVars = {\r\n        navBarBackground, navBarBorder,\r\n        navBarColor, selectedItemBackground,\r\n        selectedItemColor, selectedItemBorder,\r\n        itemHoverBackground, itemHoverColor\r\n    };\r\n\r\n    if(items && items.length > 0 && hasComponentElements()) {\r\n        const currentSelectedItem = selectedIndex > 0\r\n                                   ? items[selectedIndex].title\r\n                                   : \"\";\r\n        if(selectedItem && currentSelectedItem !== selectedItem) {\r\n            let i=0;\r\n            for(let item of items) {\r\n                if(item.title === selectedItem) {\r\n                    onSelectItem(i)();\r\n                }\r\n                i++;\r\n            }\r\n        } else if(!currentSelectedItem) {\r\n            onSelectItem(0);\r\n        }\r\n    }\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    if(!components[index]) {\r\n        const comp = _bb.initialiseComponent(\r\n            items[index].component, componentElements[index]);\r\n        components[index] = comp;   \r\n    }\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n    {#if !hideNavBar}\r\n    <div class=\"navbar\">\r\n        {#each items as navItem, index}\r\n        <div class=\"navitem\"\r\n             on:click={onSelectItem(index)}\r\n             class:selected={selectedIndex === index}>\r\n            {navItem.title}\r\n        </div>\r\n        {/each}\r\n    </div>\r\n    {/if}\r\n    {#each items as navItem, index}\r\n\r\n    <div class=\"content\"\r\n         bind:this={componentElements[index]}>\r\n    </div>\r\n    {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    height: 100%;\r\n    width:100%;\r\n    grid-template-columns: [navbar] auto [content] 1fr;\r\n    display: grid;\r\n}\r\n\r\n.navbar {\r\n    grid-column: navbar;\r\n    background: var(--navBarBackground);\r\n    border: var(--navBarBorder);\r\n    color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n    padding: 10px 17px;\r\n    cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n    background: var(--itemHoverBackground);\r\n    color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n    background: var(--selectedItemBackground);\r\n    border: var(--selectedItemBorder);\r\n    color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n    grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
     "<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _bb;\n\nlet actualValue = \"\";\n$: {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.subscribe(s => {\n\t\t\tactualValue = _bb.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t   type=\"password\" \n\t   value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n    width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
-    "<script>\r\n\r\nexport let columns=[];\r\nexport let data=\"\";\r\nexport let tableClass=\"\";\r\nexport let theadClass=\"\";\r\nexport let tbodyClass=\"\";\r\nexport let trClass=\"\";\r\nexport let thClass=\"\";\r\nexport let onRowClick;\r\n\r\nexport let _bb;\r\n\r\nconst rowClickHandler = (row) => () => {\r\n    onRowClick(row);\r\n}\r\n\r\n</script>\r\n\r\n <table class={tableClass}>\r\n    <thead class={theadClass}>\r\n        <tr class={trClass}>\r\n            {#each columns as col}\r\n            <th class={thClass}>{col.title}</th>\r\n            {/each}\r\n        </tr>\r\n    </thead>\r\n    <tbody class={tbodyClass}>\r\n        {#each data as row}\r\n        <tr class={trClass}\r\n            on:click={rowClickHandler(row)} >\r\n            {#each columns as col}\r\n            <th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>\r\n            {/each}\r\n        </tr>\r\n        {/each}\r\n    </tbody>\r\n</table> \r\n\r\n<style>\r\n\r\n.table-default {\r\n    width: 100%;\r\n    margin-bottom: 1rem;\r\n    color: #212529;\r\n    border-collapse: collapse;\r\n}\r\n\r\n.table-default .thead-default .th-default {\r\n    vertical-align: bottom;\r\n    border-bottom: 2px solid #dee2e6;\r\n    font-weight: bold;\r\n}\r\n\r\n.table-default .th-default {\r\n    padding: .75rem;\r\n    vertical-align: top;\r\n    border-top: 1px solid #dee2e6;\r\n    font-weight: normal;\r\n}\r\n\r\n.th-default {\r\n    text-align: inherit;\r\n}\r\n\r\n.table-default .tbody-default .tr-default:hover {\r\n    color: #212529;\r\n    background-color: rgba(0,0,0,.075);\r\n    cursor: pointer;\r\n}\r\n\r\n</style>",
-    "<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = [];\r\nexport let hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex = -1;\r\nlet contentElement;\r\nlet styleVars={};\r\nlet currentComponent;\r\n\r\n\r\n$: {\r\n    styleVars = {\r\n        navBarBackground, navBarBorder,\r\n        navBarColor, selectedItemBackground,\r\n        selectedItemColor, selectedItemBorder,\r\n        itemHoverBackground, itemHoverColor\r\n    };\r\n\r\n    if(items && items.length > 0 && contentElement) {\r\n        const currentSelectedItem = selectedIndex > 0\r\n                                   ? items[selectedIndex].title\r\n                                   : \"\";\r\n        if(selectedItem && currentSelectedItem !== selectedItem) {\r\n            let i=0;\r\n            for(let item of items) {\r\n                if(item.title === selectedItem) {\r\n                    onSelectItem(i)();\r\n                }\r\n                i++;\r\n            }\r\n        } else if(!currentSelectedItem) {\r\n            onSelectItem(0);\r\n        }\r\n    }\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    if(currentComponent) currentComponent.$destoy();\r\n    currentComponent = _bb.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n    {#if !hideNavBar}\r\n    <div class=\"navbar\">\r\n        {#each items as navItem, index}\r\n        <div class=\"navitem\"\r\n             on:click={onSelectItem(index)}\r\n             class:selected={selectedIndex === index}>\r\n            {navItem.title}\r\n        </div>\r\n        {/each}\r\n    </div>\r\n    {/if}\r\n    <div class=\"content\"\r\n         bind:this={contentElement}>\r\n    </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    height: 100%;\r\n    width:100%;\r\n    grid-template-columns: [navbar] auto [content] 1fr;\r\n    display: grid;\r\n}\r\n\r\n.navbar {\r\n    grid-column: navbar;\r\n    background: var(--navBarBackground);\r\n    border: var(--navBarBorder);\r\n    color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n    padding: 10px 17px;\r\n    cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n    background: var(--itemHoverBackground);\r\n    color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n    background: var(--selectedItemBackground);\r\n    border: var(--selectedItemBorder);\r\n    color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n    grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
-    "<script>\n\nimport { emptyProps } from \"./emptyProps\";\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\nexport let onLoad;\n\nexport let data=[];\nexport let dataItemComponent;\n\nexport let _bb;\n\nlet staticHtmlElements = {};\nlet staticComponents = {};\nlet dataBoundElements = {};\nlet dataBoundComponents = {};\n\nlet onLoadCalled = false;\n\nconst hasDataBoundComponents = () => \n    Object.getOwnPropertyNames(dataBoundComponents).length === 0;\n\nconst hasData = () => \n    Array.isArray(data) && data.length > 0;\n\nconst hasStaticComponents = () => {\n    return Object.getOwnPropertyNames(staticComponents).length === 0;\n}\n\n$: {\n\n    if(staticHtmlElements) {\n        if(hasStaticComponents()) {\n            for(let c in staticComponents) {\n                staticComponents[c].$destroy();\n            }\n            staticComponents = {};\n        }\n\n        for(let el in staticHtmlElements) {\n            staticComponents[el] = _bb.initialiseComponent(\n                children[el].control,\n                staticHtmlElements[el]\n            );\n        }\n    }\n    \n\n    if(hasDataBoundComponents()) {\n        for(let c in dataBoundComponents) {\n            dataBoundComponents[c].$destroy();\n        }\n        dataBoundComponents = {};\n    }\n\n    if(hasData()) {\n        let index = 0;\n        for(let d in dataBoundElements) {\n            _bb.initialiseComponent(\n                dataItemComponent,\n                dataBoundElements[d],\n                data[parseInt(d)]\n            );\n        }\n    }\n\n    if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {\n        onLoad();\n        onLoadCalled = true;\n    }\n}\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n     style=\"width: {width}; height: {height}\">\n\n    {#if children}\n    {#each children as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={staticHtmlElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {/if}\n\n    {#if data && data.length > 0}\n    {#each data as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={dataBoundElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {/if}\n</div>\n\n<style>\n\n.horizontal {\n    display:inline-block;\n}\n\n.vertical {\n    display: block;\n}\n\n</style>",
     "<script>\r\nimport {buildStyle} from \"./buildStyle\";\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let component=\"\";\r\nexport let text=\"\";\r\nexport let containerClass=\"\";\r\nexport let background=\"\";\r\nexport let border=\"\";\r\nexport let borderRadius=\"\";\r\nexport let font=\"\";\r\nexport let display=\"\";\r\nexport let textAlign=\"\";\r\nexport let color=\"\";\r\nexport let padding=\"\";\r\nexport let margin=\"\";\r\nexport let hoverBackground=\"\";\r\nexport let hoverColor=\"\";\r\nexport let onClick;\r\nexport let height;\r\nexport let width;\r\n\r\nexport let _bb;\r\n\r\nlet styleVars;\r\nlet style=\"\";\r\nlet componentElement;\r\n\r\n$: {\r\n    style=buildStyle({\r\n        border, background, font, margin,\r\n        padding, display, color, height, width,\r\n        \"text-align\": textAlign,\r\n        \"border-radius\":borderRadius,\r\n        cursor: onClick ? \"pointer\" : \"none\"\r\n    });\r\n\r\n    if(_bb && component) {\r\n        _bb.initialiseComponent(component, componentElement);\r\n    }\r\n\r\n    styleVars = {\r\n        hoverBackground:hoverBackground || background, \r\n        hoverColor:hoverColor || color\r\n    }\r\n}\r\n\r\nconst clickHandler = () => {\r\n    if(onClick) onClick();\r\n}\r\n\r\n</script>\r\n\r\n<div class=\"{containerClass} panel\" \r\n     style={style}\r\n     use:cssVars={styleVars}\r\n     this:bind={componentElement}\r\n     on:click={clickHandler}>\r\n    {component && component._component ? \"\" : text}\r\n</div>\r\n\r\n<style>\r\n\r\n.panel:hover {\r\n    background: var(--hoverBackground);\r\n    color: var(--hoverColor);\r\n\r\n}\r\n\r\n</style>\r\n",
+    "<script>\n\nimport { emptyProps } from \"./emptyProps\";\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\nexport let onLoad;\n\nexport let data=[];\nexport let dataItemComponent;\n\nexport let _bb;\n\nlet staticHtmlElements = {};\nlet staticComponents = {};\nlet dataBoundElements = {};\nlet dataBoundComponents = {};\n\nlet onLoadCalled = false;\n\nconst hasDataBoundComponents = () => \n    Object.getOwnPropertyNames(dataBoundComponents).length > 0;\n\nconst hasData = () => \n    Array.isArray(data) && data.length > 0;\n\nconst hasStaticComponents = () => {\n    return Object.getOwnPropertyNames(staticComponents).length > 0;\n}\n\n$: {\n\n    if(staticHtmlElements) {\n        if(hasStaticComponents()) {\n            for(let c in staticComponents) {\n                staticComponents[c].$destroy();\n            }\n            staticComponents = {};\n        }\n\n        for(let el in staticHtmlElements) {\n            staticComponents[el] = _bb.initialiseComponent(\n                children[el].control,\n                staticHtmlElements[el]\n            );\n        }\n    }\n    \n\n    if(hasDataBoundComponents()) {\n        for(let c in dataBoundComponents) {\n            dataBoundComponents[c].$destroy();\n        }\n        dataBoundComponents = {};\n    }\n\n    if(hasData()) {\n        let index = 0;\n        for(let d in dataBoundElements) {\n            _bb.initialiseComponent(\n                dataItemComponent,\n                dataBoundElements[d],\n                data[parseInt(d)]\n            );\n        }\n    }\n\n    if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {\n        onLoad();\n        onLoadCalled = true;\n    }\n}\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n     style=\"width: {width}; height: {height}\">\n\n    {#if children}\n    {#each children as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={staticHtmlElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {/if}\n\n    {#if data && data.length > 0}\n    {#each data as child, index}\n    <div class={direction}>\n        <div class=\"{itemContainerClass}\"\n            bind:this={dataBoundElements[index]}>\n        </div>\n    </div>\n    {/each}\n    {/if}\n</div>\n\n<style>\n\n.horizontal {\n    display:inline-block;\n}\n\n.vertical {\n    display: block;\n}\n\n</style>",
+    "<script>\r\n\r\nexport let columns=[];\r\nexport let data=\"\";\r\nexport let tableClass=\"\";\r\nexport let theadClass=\"\";\r\nexport let tbodyClass=\"\";\r\nexport let trClass=\"\";\r\nexport let thClass=\"\";\r\nexport let onRowClick;\r\n\r\nexport let _bb;\r\n\r\nconst rowClickHandler = (row) => () => {\r\n    onRowClick(row);\r\n}\r\n\r\n</script>\r\n\r\n <table class={tableClass}>\r\n    <thead class={theadClass}>\r\n        <tr class={trClass}>\r\n            {#each columns as col}\r\n            <th class={thClass}>{col.title}</th>\r\n            {/each}\r\n        </tr>\r\n    </thead>\r\n    <tbody class={tbodyClass}>\r\n        {#each data as row}\r\n        <tr class={trClass}\r\n            on:click={rowClickHandler(row)} >\r\n            {#each columns as col}\r\n            <th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>\r\n            {/each}\r\n        </tr>\r\n        {/each}\r\n    </tbody>\r\n</table> \r\n\r\n<style>\r\n\r\n.table-default {\r\n    width: 100%;\r\n    margin-bottom: 1rem;\r\n    color: #212529;\r\n    border-collapse: collapse;\r\n}\r\n\r\n.table-default .thead-default .th-default {\r\n    vertical-align: bottom;\r\n    border-bottom: 2px solid #dee2e6;\r\n    font-weight: bold;\r\n}\r\n\r\n.table-default .th-default {\r\n    padding: .75rem;\r\n    vertical-align: top;\r\n    border-top: 1px solid #dee2e6;\r\n    font-weight: normal;\r\n}\r\n\r\n.th-default {\r\n    text-align: inherit;\r\n}\r\n\r\n.table-default .tbody-default .tr-default:hover {\r\n    color: #212529;\r\n    background-color: rgba(0,0,0,.075);\r\n    cursor: pointer;\r\n}\r\n\r\n</style>",
     "<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _bb;\nlet contentComponentContainer;\n\n$:{\n\tif(_bb && contentComponentContainer && contentComponent._component)\n\t\t_bb.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n\nconst clickHandler = () => {\n\tif(onClick) onClick();\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={clickHandler}>\n    {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n    {:else if contentText}\n    {contentText}\n    {:else}\n    <slot />\n    {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>"
   ],
   "names": [],
-  "mappings": "AAkCA,kBAAkB,eAAC,CAAC,AAChB,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC;ACCD,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AACD,SAAS,cAAC,CAAC,AACP,iBAAiB,CAAE,QAAQ,AAC/B,CAAC,AACD,WAAW,cAAC,CAAC,AACT,KAAK,CAAE,IAAI,AACf,CAAC;ACwCD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,QAAQ,IAAI,CACZ,qBAAqB,CAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAC3D,kBAAkB,CAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,AAC5D,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,MAAM,CACzB,cAAc,CAAE,MAAM,CACtB,KAAK,CAAE,KAAK,AAChB,CAAC,AAED,eAAe,cAAC,CAAC,AACb,aAAa,CAAE,IAAI;AACvB,CAAC,AAED,6BAAe,CAAG,GAAG,cAAC,CAAC,AACnB,SAAS,CAAE,IAAI,AACnB,CAAC,AAED,uBAAuB,cAAC,CAAC,AACrB,UAAU,CAAE,KAAK,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AAED,wBAAwB,cAAC,CAAC,AACtB,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,YAAY,CAAE,KAAK,CACnB,YAAY,CAAE,GAAG,CACjB,YAAY,CAAE,MAAM,CACpB,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,MAAM,CACb,gBAAgB,CAAE,SAAS,AAC/B,CAAC,AAED,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AAED,cAAc,cAAC,CAAC,AACf,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,eAAe,cAAC,CAAC,AAChB,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,6BAAe,OAAO,AAAC,CAAC,AACvB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,6BAAe,MAAM,AAAC,CAAC,AACtB,YAAY,CAAE,IAAI,AACnB,CAAC;AC1HD,KAAK,eAAC,CAAC,AACH,OAAO,CAAE,IAAI,AACjB,CAAC;ACxBD,QAAQ,eAAC,CAAC,AACN,KAAK,CAAE,IAAI,CACd,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,uBAAQ,SAAS,AAAC,CAAC,AAClB,KAAK,CAAE,IAAI,AACZ,CAAC;ACTD,cAAc,cAAC,CAAC,AACZ,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,IAAI,CACnB,KAAK,CAAE,OAAO,CACd,eAAe,CAAE,QAAQ,AAC7B,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,WAAW,cAAC,CAAC,AACvC,cAAc,CAAE,MAAM,CACtB,aAAa,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAChC,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,4BAAc,CAAC,WAAW,cAAC,CAAC,AACxB,OAAO,CAAE,MAAM,CACf,cAAc,CAAE,GAAG,CACnB,UAAU,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAC7B,WAAW,CAAE,MAAM,AACvB,CAAC,AAED,WAAW,cAAC,CAAC,AACT,UAAU,CAAE,OAAO,AACvB,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,yBAAW,MAAM,AAAC,CAAC,AAC7C,KAAK,CAAE,OAAO,CACd,gBAAgB,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAClC,MAAM,CAAE,OAAO,AACnB,CAAC;ACQD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,MAAM,IAAI,CACV,qBAAqB,CAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAClD,OAAO,CAAE,IAAI,AACjB,CAAC,AAED,OAAO,cAAC,CAAC,AACL,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,IAAI,kBAAkB,CAAC,CACnC,MAAM,CAAE,IAAI,cAAc,CAAC,CAC3B,KAAK,CAAE,IAAI,aAAa,CAAC,AAC7B,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,OAAO,CAAE,IAAI,CAAC,IAAI,CAClB,MAAM,CAAE,OAAO,AACnB,CAAC,AAED,sBAAQ,MAAM,AAAC,CAAC,AACZ,UAAU,CAAE,IAAI,qBAAqB,CAAC,CACtC,KAAK,CAAE,IAAI,gBAAgB,CAAC,AAChC,CAAC,AAED,QAAQ,SAAS,cAAC,CAAC,AACf,UAAU,CAAE,IAAI,wBAAwB,CAAC,CACzC,MAAM,CAAE,IAAI,oBAAoB,CAAC,CACjC,KAAK,CAAE,IAAI,mBAAmB,CAAC,AACnC,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,WAAW,CAAE,OAAO,AACxB,CAAC;ACHD,WAAW,cAAC,CAAC,AACT,QAAQ,YAAY,AACxB,CAAC,AAED,SAAS,cAAC,CAAC,AACP,OAAO,CAAE,KAAK,AAClB,CAAC;ACjDD,oBAAM,MAAM,AAAC,CAAC,AACV,UAAU,CAAE,IAAI,iBAAiB,CAAC,CAClC,KAAK,CAAE,IAAI,YAAY,CAAC,AAE5B,CAAC;AC9BD,QAAQ,eAAC,CAAC,AACT,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,uBAAQ,OAAO,AAAC,CAAC,AAChB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,uBAAQ,MAAM,AAAC,CAAC,AACf,YAAY,CAAE,IAAI,AACnB,CAAC"
+  "mappings": "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"
 }

packages/standard-components/public/bundle.js

@@ -2582,26 +2582,34 @@ var app = (function () {
       };
 
     /* src\Nav.svelte generated by Svelte v3.12.1 */
+    const { Object: Object_1 } = globals;
 
     const file$6 = "src\\Nav.svelte";
 
     function get_each_context$2(ctx, list, i) {
-    	const child_ctx = Object.create(ctx);
+    	const child_ctx = Object_1.create(ctx);
     	child_ctx.navItem = list[i];
     	child_ctx.index = i;
     	return child_ctx;
     }
 
-    // (60:4) {#if !hideNavBar}
+    function get_each_context_1(ctx, list, i) {
+    	const child_ctx = Object_1.create(ctx);
+    	child_ctx.navItem = list[i];
+    	child_ctx.index = i;
+    	return child_ctx;
+    }
+
+    // (66:4) {#if !hideNavBar}
     function create_if_block$3(ctx) {
     	var div;
 
-    	let each_value = ctx.items;
+    	let each_value_1 = ctx.items;
 
     	let each_blocks = [];
 
-    	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+    	for (let i = 0; i < each_value_1.length; i += 1) {
+    		each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
     	}
 
     	const block = {
@@ -2628,7 +2636,7 @@ var app = (function () {
 
     		h: function hydrate() {
     			attr_dev(div, "class", "navbar svelte-aihwli");
-    			add_location(div, file$6, 60, 4, 1615);
+    			add_location(div, file$6, 66, 4, 1774);
     		},
 
     		m: function mount(target, anchor) {
@@ -2641,16 +2649,16 @@ var app = (function () {
 
     		p: function update(changed, ctx) {
     			if (changed.selectedIndex || changed.items) {
-    				each_value = ctx.items;
+    				each_value_1 = ctx.items;
 
     				let i;
-    				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$2(ctx, each_value, i);
+    				for (i = 0; i < each_value_1.length; i += 1) {
+    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(changed, child_ctx);
     					} else {
-    						each_blocks[i] = create_each_block$2(child_ctx);
+    						each_blocks[i] = create_each_block_1(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(div, null);
     					}
@@ -2659,7 +2667,7 @@ var app = (function () {
     				for (; i < each_blocks.length; i += 1) {
     					each_blocks[i].d(1);
     				}
-    				each_blocks.length = each_value.length;
+    				each_blocks.length = each_value_1.length;
     			}
     		},
 
@@ -2671,12 +2679,12 @@ var app = (function () {
     			destroy_each(each_blocks, detaching);
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block$3.name, type: "if", source: "(60:4) {#if !hideNavBar}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block$3.name, type: "if", source: "(66:4) {#if !hideNavBar}", ctx });
     	return block;
     }
 
-    // (62:8) {#each items as navItem, index}
-    function create_each_block$2(ctx) {
+    // (68:8) {#each items as navItem, index}
+    function create_each_block_1(ctx) {
     	var div, t0_value = ctx.navItem.title + "", t0, t1, dispose;
 
     	const block = {
@@ -2700,7 +2708,7 @@ var app = (function () {
     		h: function hydrate() {
     			attr_dev(div, "class", "navitem svelte-aihwli");
     			toggle_class(div, "selected", ctx.selectedIndex === ctx.index);
-    			add_location(div, file$6, 62, 8, 1686);
+    			add_location(div, file$6, 68, 8, 1845);
     			dispose = listen_dev(div, "click", ctx.onSelectItem(ctx.index));
     		},
 
@@ -2729,53 +2737,117 @@ var app = (function () {
     			dispose();
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block$2.name, type: "each", source: "(62:8) {#each items as navItem, index}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block_1.name, type: "each", source: "(68:8) {#each items as navItem, index}", ctx });
     	return block;
     }
 
-    function create_fragment$6(ctx) {
-    	var div1, t, div0, cssVars_action;
+    // (77:4) {#each items as navItem, index}
+    function create_each_block$2(ctx) {
+    	var div, index = ctx.index;
 
-    	var if_block = (!ctx.hideNavBar) && create_if_block$3(ctx);
+    	const assign_div = () => ctx.div_binding(div, index);
+    	const unassign_div = () => ctx.div_binding(null, index);
 
     	const block = {
     		c: function create() {
-    			div1 = element("div");
-    			if (if_block) if_block.c();
-    			t = space();
-    			div0 = element("div");
+    			div = element("div");
     			this.h();
     		},
 
     		l: function claim(nodes) {
-    			div1 = claim_element(nodes, "DIV", { class: true }, false);
-    			var div1_nodes = children(div1);
+    			div = claim_element(nodes, "DIV", { class: true }, false);
+    			var div_nodes = children(div);
 
-    			if (if_block) if_block.l(div1_nodes);
-    			t = claim_space(div1_nodes);
-
-    			div0 = claim_element(div1_nodes, "DIV", { class: true }, false);
-    			var div0_nodes = children(div0);
-
-    			div0_nodes.forEach(detach_dev);
-    			div1_nodes.forEach(detach_dev);
+    			div_nodes.forEach(detach_dev);
     			this.h();
     		},
 
     		h: function hydrate() {
-    			attr_dev(div0, "class", "content svelte-aihwli");
-    			add_location(div0, file$6, 70, 4, 1898);
-    			attr_dev(div1, "class", "root svelte-aihwli");
-    			add_location(div1, file$6, 58, 0, 1544);
+    			attr_dev(div, "class", "content svelte-aihwli");
+    			add_location(div, file$6, 78, 4, 2096);
     		},
 
     		m: function mount(target, anchor) {
-    			insert_dev(target, div1, anchor);
-    			if (if_block) if_block.m(div1, null);
-    			append_dev(div1, t);
-    			append_dev(div1, div0);
-    			ctx.div0_binding(div0);
-    			cssVars_action = cssVars.call(null, div1, ctx.styleVars) || {};
+    			insert_dev(target, div, anchor);
+    			assign_div();
+    		},
+
+    		p: function update(changed, new_ctx) {
+    			ctx = new_ctx;
+    			if (index !== ctx.index) {
+    				unassign_div();
+    				index = ctx.index;
+    				assign_div();
+    			}
+    		},
+
+    		d: function destroy(detaching) {
+    			if (detaching) {
+    				detach_dev(div);
+    			}
+
+    			unassign_div();
+    		}
+    	};
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block$2.name, type: "each", source: "(77:4) {#each items as navItem, index}", ctx });
+    	return block;
+    }
+
+    function create_fragment$6(ctx) {
+    	var div, t, cssVars_action;
+
+    	var if_block = (!ctx.hideNavBar) && create_if_block$3(ctx);
+
+    	let each_value = ctx.items;
+
+    	let each_blocks = [];
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+    	}
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			if (if_block) if_block.c();
+    			t = space();
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+    			this.h();
+    		},
+
+    		l: function claim(nodes) {
+    			div = claim_element(nodes, "DIV", { class: true }, false);
+    			var div_nodes = children(div);
+
+    			if (if_block) if_block.l(div_nodes);
+    			t = claim_space(div_nodes);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].l(div_nodes);
+    			}
+
+    			div_nodes.forEach(detach_dev);
+    			this.h();
+    		},
+
+    		h: function hydrate() {
+    			attr_dev(div, "class", "root svelte-aihwli");
+    			add_location(div, file$6, 64, 0, 1703);
+    		},
+
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    			if (if_block) if_block.m(div, null);
+    			append_dev(div, t);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].m(div, null);
+    			}
+
+    			cssVars_action = cssVars.call(null, div, ctx.styleVars) || {};
     		},
 
     		p: function update(changed, ctx) {
@@ -2785,13 +2857,35 @@ var app = (function () {
     				} else {
     					if_block = create_if_block$3(ctx);
     					if_block.c();
-    					if_block.m(div1, t);
+    					if_block.m(div, t);
     				}
     			} else if (if_block) {
     				if_block.d(1);
     				if_block = null;
     			}
 
+    			if (changed.componentElements || changed.items) {
+    				each_value = ctx.items;
+
+    				let i;
+    				for (i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context$2(ctx, each_value, i);
+
+    					if (each_blocks[i]) {
+    						each_blocks[i].p(changed, child_ctx);
+    					} else {
+    						each_blocks[i] = create_each_block$2(child_ctx);
+    						each_blocks[i].c();
+    						each_blocks[i].m(div, null);
+    					}
+    				}
+
+    				for (; i < each_blocks.length; i += 1) {
+    					each_blocks[i].d(1);
+    				}
+    				each_blocks.length = each_value.length;
+    			}
+
     			if (typeof cssVars_action.update === 'function' && changed.styleVars) {
     				cssVars_action.update.call(null, ctx.styleVars);
     			}
@@ -2802,11 +2896,13 @@ var app = (function () {
 
     		d: function destroy(detaching) {
     			if (detaching) {
-    				detach_dev(div1);
+    				detach_dev(div);
     			}
 
     			if (if_block) if_block.d();
-    			ctx.div0_binding(null);
+
+    			destroy_each(each_blocks, detaching);
+
     			if (cssVars_action && typeof cssVars_action.destroy === 'function') cssVars_action.destroy();
     		}
     	};
@@ -2818,24 +2914,33 @@ var app = (function () {
     	let { navBarBackground = "", navBarBorder="", navBarColor="", selectedItemBackground="", selectedItemColor="", selectedItemBorder="", itemHoverBackground="", itemHoverColor="", items = [], hideNavBar=false, selectedItem="", _bb } = $$props;
 
     let selectedIndex = -1;
-    let contentElement;
     let styleVars={};
-    let currentComponent;
+    let components = {};
+    let componentElements = {};
+
+
+    const hasComponentElements = () => 
+        Object.getOwnPropertyNames(componentElements).length > 0;
 
     const onSelectItem = (index) => () => {
         $$invalidate('selectedIndex', selectedIndex = index);
-        if(currentComponent) currentComponent.$destoy();
-        currentComponent = _bb.initialiseComponent(items[index].component, contentElement);
+        if(!components[index]) {
+            const comp = _bb.initialiseComponent(
+                items[index].component, componentElements[index]);
+            components[index] = comp;   
+        }
     };
 
     	const writable_props = ['navBarBackground', 'navBarBorder', 'navBarColor', 'selectedItemBackground', 'selectedItemColor', 'selectedItemBorder', 'itemHoverBackground', 'itemHoverColor', 'items', 'hideNavBar', 'selectedItem', '_bb'];
-    	Object.keys($$props).forEach(key => {
+    	Object_1.keys($$props).forEach(key => {
     		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<Nav> was created with unknown prop '${key}'`);
     	});
 
-    	function div0_binding($$value) {
+    	function div_binding($$value, index) {
+    		if (componentElements[index] === $$value) return;
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-    			$$invalidate('contentElement', contentElement = $$value);
+    			componentElements[index] = $$value;
+    			$$invalidate('componentElements', componentElements);
     		});
     	}
 
@@ -2855,7 +2960,7 @@ var app = (function () {
     	};
 
     	$$self.$capture_state = () => {
-    		return { navBarBackground, navBarBorder, navBarColor, selectedItemBackground, selectedItemColor, selectedItemBorder, itemHoverBackground, itemHoverColor, items, hideNavBar, selectedItem, _bb, selectedIndex, contentElement, styleVars, currentComponent };
+    		return { navBarBackground, navBarBorder, navBarColor, selectedItemBackground, selectedItemColor, selectedItemBorder, itemHoverBackground, itemHoverColor, items, hideNavBar, selectedItem, _bb, selectedIndex, styleVars, components, componentElements };
     	};
 
     	$$self.$inject_state = $$props => {
@@ -2872,13 +2977,13 @@ var app = (function () {
     		if ('selectedItem' in $$props) $$invalidate('selectedItem', selectedItem = $$props.selectedItem);
     		if ('_bb' in $$props) $$invalidate('_bb', _bb = $$props._bb);
     		if ('selectedIndex' in $$props) $$invalidate('selectedIndex', selectedIndex = $$props.selectedIndex);
-    		if ('contentElement' in $$props) $$invalidate('contentElement', contentElement = $$props.contentElement);
     		if ('styleVars' in $$props) $$invalidate('styleVars', styleVars = $$props.styleVars);
-    		if ('currentComponent' in $$props) currentComponent = $$props.currentComponent;
+    		if ('components' in $$props) components = $$props.components;
+    		if ('componentElements' in $$props) $$invalidate('componentElements', componentElements = $$props.componentElements);
     	};
 
-    	$$self.$$.update = ($$dirty = { navBarBackground: 1, navBarBorder: 1, navBarColor: 1, selectedItemBackground: 1, selectedItemColor: 1, selectedItemBorder: 1, itemHoverBackground: 1, itemHoverColor: 1, items: 1, contentElement: 1, selectedIndex: 1, selectedItem: 1 }) => {
-    		if ($$dirty.navBarBackground || $$dirty.navBarBorder || $$dirty.navBarColor || $$dirty.selectedItemBackground || $$dirty.selectedItemColor || $$dirty.selectedItemBorder || $$dirty.itemHoverBackground || $$dirty.itemHoverColor || $$dirty.items || $$dirty.contentElement || $$dirty.selectedIndex || $$dirty.selectedItem) { {
+    	$$self.$$.update = ($$dirty = { navBarBackground: 1, navBarBorder: 1, navBarColor: 1, selectedItemBackground: 1, selectedItemColor: 1, selectedItemBorder: 1, itemHoverBackground: 1, itemHoverColor: 1, items: 1, selectedIndex: 1, selectedItem: 1 }) => {
+    		if ($$dirty.navBarBackground || $$dirty.navBarBorder || $$dirty.navBarColor || $$dirty.selectedItemBackground || $$dirty.selectedItemColor || $$dirty.selectedItemBorder || $$dirty.itemHoverBackground || $$dirty.itemHoverColor || $$dirty.items || $$dirty.selectedIndex || $$dirty.selectedItem) { {
                 $$invalidate('styleVars', styleVars = {
                     navBarBackground, navBarBorder,
                     navBarColor, selectedItemBackground,
@@ -2886,7 +2991,7 @@ var app = (function () {
                     itemHoverBackground, itemHoverColor
                 });
             
-                if(items && items.length > 0 && contentElement) {
+                if(items && items.length > 0 && hasComponentElements()) {
                     const currentSelectedItem = selectedIndex > 0
                                                ? items[selectedIndex].title
                                                : "";
@@ -2917,10 +3022,10 @@ var app = (function () {
     		selectedItem,
     		_bb,
     		selectedIndex,
-    		contentElement,
     		styleVars,
+    		componentElements,
     		onSelectItem,
-    		div0_binding
+    		div_binding
     	};
     }
 
@@ -3387,19 +3492,19 @@ var app = (function () {
     }
 
     /* src\StackPanel.svelte generated by Svelte v3.12.1 */
-    const { Object: Object_1 } = globals;
+    const { Object: Object_1$1 } = globals;
 
     const file$8 = "src\\StackPanel.svelte";
 
     function get_each_context$3(ctx, list, i) {
-    	const child_ctx = Object_1.create(ctx);
+    	const child_ctx = Object_1$1.create(ctx);
     	child_ctx.child = list[i];
     	child_ctx.index = i;
     	return child_ctx;
     }
 
-    function get_each_context_1(ctx, list, i) {
-    	const child_ctx = Object_1.create(ctx);
+    function get_each_context_1$1(ctx, list, i) {
+    	const child_ctx = Object_1$1.create(ctx);
     	child_ctx.child = list[i];
     	child_ctx.index = i;
     	return child_ctx;
@@ -3414,7 +3519,7 @@ var app = (function () {
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value_1.length; i += 1) {
-    		each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+    		each_blocks[i] = create_each_block_1$1(get_each_context_1$1(ctx, each_value_1, i));
     	}
 
     	const block = {
@@ -3448,12 +3553,12 @@ var app = (function () {
 
     				let i;
     				for (i = 0; i < each_value_1.length; i += 1) {
-    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+    					const child_ctx = get_each_context_1$1(ctx, each_value_1, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(changed, child_ctx);
     					} else {
-    						each_blocks[i] = create_each_block_1(child_ctx);
+    						each_blocks[i] = create_each_block_1$1(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
     					}
@@ -3479,7 +3584,7 @@ var app = (function () {
     }
 
     // (85:4) {#each children as child, index}
-    function create_each_block_1(ctx) {
+    function create_each_block_1$1(ctx) {
     	var div1, div0, index = ctx.index, div0_class_value, t, div1_class_value;
 
     	const assign_div0 = () => ctx.div0_binding(div0, index);
@@ -3508,9 +3613,9 @@ var app = (function () {
 
     		h: function hydrate() {
     			attr_dev(div0, "class", div0_class_value = "" + null_to_empty(ctx.itemContainerClass) + " svelte-osi0db");
-    			add_location(div0, file$8, 86, 8, 1930);
+    			add_location(div0, file$8, 86, 8, 1926);
     			attr_dev(div1, "class", div1_class_value = "" + null_to_empty(ctx.direction) + " svelte-osi0db");
-    			add_location(div1, file$8, 85, 4, 1898);
+    			add_location(div1, file$8, 85, 4, 1894);
     		},
 
     		m: function mount(target, anchor) {
@@ -3545,7 +3650,7 @@ var app = (function () {
     			unassign_div0();
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block_1.name, type: "each", source: "(85:4) {#each children as child, index}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block_1$1.name, type: "each", source: "(85:4) {#each children as child, index}", ctx });
     	return block;
     }
 
@@ -3652,9 +3757,9 @@ var app = (function () {
 
     		h: function hydrate() {
     			attr_dev(div0, "class", div0_class_value = "" + null_to_empty(ctx.itemContainerClass) + " svelte-osi0db");
-    			add_location(div0, file$8, 96, 8, 2167);
+    			add_location(div0, file$8, 96, 8, 2163);
     			attr_dev(div1, "class", div1_class_value = "" + null_to_empty(ctx.direction) + " svelte-osi0db");
-    			add_location(div1, file$8, 95, 4, 2135);
+    			add_location(div1, file$8, 95, 4, 2131);
     		},
 
     		m: function mount(target, anchor) {
@@ -3724,7 +3829,7 @@ var app = (function () {
     			attr_dev(div, "class", div_class_value = "root " + ctx.containerClass + " svelte-osi0db");
     			set_style(div, "width", ctx.width);
     			set_style(div, "height", ctx.height);
-    			add_location(div, file$8, 80, 0, 1755);
+    			add_location(div, file$8, 80, 0, 1751);
     		},
 
     		m: function mount(target, anchor) {
@@ -3801,17 +3906,17 @@ var app = (function () {
     let onLoadCalled = false;
 
     const hasDataBoundComponents = () => 
-        Object.getOwnPropertyNames(dataBoundComponents).length === 0;
+        Object.getOwnPropertyNames(dataBoundComponents).length > 0;
 
     const hasData = () => 
         Array.isArray(data) && data.length > 0;
 
     const hasStaticComponents = () => {
-        return Object.getOwnPropertyNames(staticComponents).length === 0;
+        return Object.getOwnPropertyNames(staticComponents).length > 0;
     };
 
     	const writable_props = ['direction', 'children', 'width', 'height', 'containerClass', 'itemContainerClass', 'onLoad', 'data', 'dataItemComponent', '_bb'];
-    	Object_1.keys($$props).forEach(key => {
+    	Object_1$1.keys($$props).forEach(key => {
     		if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`<StackPanel> was created with unknown prop '${key}'`);
     	});
 
@@ -4032,7 +4137,7 @@ var app = (function () {
 
     const file$9 = "src\\Table.svelte";
 
-    function get_each_context_1$1(ctx, list, i) {
+    function get_each_context_1$2(ctx, list, i) {
     	const child_ctx = Object.create(ctx);
     	child_ctx.col = list[i];
     	return child_ctx;
@@ -4101,7 +4206,7 @@ var app = (function () {
     }
 
     // (32:12) {#each columns as col}
-    function create_each_block_1$1(ctx) {
+    function create_each_block_1$2(ctx) {
     	var th, t_value = ctx._bb.getStateOrValue(ctx.col.value, ctx.row) + "", t, th_class_value;
 
     	const block = {
@@ -4146,7 +4251,7 @@ var app = (function () {
     			}
     		}
     	};
-    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block_1$1.name, type: "each", source: "(32:12) {#each columns as col}", ctx });
+    	dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block_1$2.name, type: "each", source: "(32:12) {#each columns as col}", ctx });
     	return block;
     }
 
@@ -4159,7 +4264,7 @@ var app = (function () {
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value_1.length; i += 1) {
-    		each_blocks[i] = create_each_block_1$1(get_each_context_1$1(ctx, each_value_1, i));
+    		each_blocks[i] = create_each_block_1$2(get_each_context_1$2(ctx, each_value_1, i));
     	}
 
     	const block = {
@@ -4210,12 +4315,12 @@ var app = (function () {
 
     				let i;
     				for (i = 0; i < each_value_1.length; i += 1) {
-    					const child_ctx = get_each_context_1$1(ctx, each_value_1, i);
+    					const child_ctx = get_each_context_1$2(ctx, each_value_1, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(changed, child_ctx);
     					} else {
-    						each_blocks[i] = create_each_block_1$1(child_ctx);
+    						each_blocks[i] = create_each_block_1$2(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(tr, t);
     					}

packages/standard-components/rollup.generatorsconfig.js

@@ -0,0 +1,16 @@
+import resolve from 'rollup-plugin-node-resolve';
+
+export default {
+	input: 'src/generators.js',
+	output: [
+		{ 
+			file: "dist/generators.js", 
+			format: 'esm', 
+			name:"budibaseStandardComponents",
+			sourcemap: "inline"
+		}
+	],
+	plugins: [
+		resolve()
+	]
+};

packages/standard-components/scripts/publishDev.js

@@ -5,10 +5,12 @@ const { join, basename } = require("path");
 const packagesFolder = "..";
 
 const jsFile = dir => join(dir, "index.js");
+const generatorsFile = dir => join(dir, "generators.js");
 const jsMapFile = dir => join(dir, "index.js.map");
 const sourceJs = jsFile("dist");
 const sourceJsMap = jsMapFile("dist");
 const componentsFile = "components.json";
+const sourceGenerators = generatorsFile("dist");
 
 const appPackages = join(packagesFolder, "server", "appPackages");
 
@@ -33,6 +35,7 @@ const nodeModules = appName => join(appPackages, appName, "node_modules", "@budi
 
     const copySourceJs = copySource(sourceJs);
     const copySourceJsMap = copySource(sourceJsMap);
+    const copyGenerators = copySource(sourceGenerators);
     const copyComponentsJson = copySource(componentsFile);
     
 
@@ -41,13 +44,18 @@ const nodeModules = appName => join(appPackages, appName, "node_modules", "@budi
 
         await copySourceJs(nodeModulesDist(app));
         await copySourceJsMap(nodeModulesDist(app));
-        await copyComponentsJson(nodeModules(app))
+        await copyGenerators(nodeModulesDist(app));
+
+        await copyComponentsJson(nodeModules(app));
 
         await copySourceJs(join(publicMain(app), "dist"));
         await copySourceJsMap(join(publicMain(app), "dist"));
+        await copyGenerators(join(publicMain(app), "dist"));
+
 
         await copySourceJs(join(publicUnauth(app), "dist"));
         await copySourceJsMap(join(publicUnauth(app), "dist"));
+        await copyGenerators(join(publicUnauth(app), "dist"));
     }
 
 })();

packages/standard-components/src/Nav.svelte

@@ -16,11 +16,14 @@ export let selectedItem="";
 export let _bb;
 
 let selectedIndex = -1;
-let contentElement;
 let styleVars={};
-let currentComponent;
+let components = {};
+let componentElements = {}
 
 
+const hasComponentElements = () => 
+    Object.getOwnPropertyNames(componentElements).length > 0;
+
 $: {
     styleVars = {
         navBarBackground, navBarBorder,
@@ -29,7 +32,7 @@ $: {
         itemHoverBackground, itemHoverColor
     };
 
-    if(items && items.length > 0 && contentElement) {
+    if(items && items.length > 0 && hasComponentElements()) {
         const currentSelectedItem = selectedIndex > 0
                                    ? items[selectedIndex].title
                                    : "";
@@ -49,8 +52,11 @@ $: {
 
 const onSelectItem = (index) => () => {
     selectedIndex = index;
-    if(currentComponent) currentComponent.$destoy();
-    currentComponent = _bb.initialiseComponent(items[index].component, contentElement);
+    if(!components[index]) {
+        const comp = _bb.initialiseComponent(
+            items[index].component, componentElements[index]);
+        components[index] = comp;   
+    }
 }
 
 
@@ -68,9 +74,12 @@ const onSelectItem = (index) => () => {
         {/each}
     </div>
     {/if}
+    {#each items as navItem, index}
+
     <div class="content"
-         bind:this={contentElement}>
+         bind:this={componentElements[index]}>
     </div>
+    {/each}
 </div>
 
 <style>

packages/standard-components/src/StackPanel.svelte

@@ -23,13 +23,13 @@ let dataBoundComponents = {};
 let onLoadCalled = false;
 
 const hasDataBoundComponents = () => 
-    Object.getOwnPropertyNames(dataBoundComponents).length === 0;
+    Object.getOwnPropertyNames(dataBoundComponents).length > 0;
 
 const hasData = () => 
     Array.isArray(data) && data.length > 0;
 
 const hasStaticComponents = () => {
-    return Object.getOwnPropertyNames(staticComponents).length === 0;
+    return Object.getOwnPropertyNames(staticComponents).length > 0;
 }
 
 $: {
@@ -70,7 +70,7 @@ $: {
     }
 
     if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {
-        onLoad();
+        _bb.call(onLoad);
         onLoadCalled = true;
     }
 }

packages/standard-components/src/Table.svelte

@@ -12,7 +12,7 @@ export let onRowClick;
 export let _bb;
 
 const rowClickHandler = (row) => () => {
-    onRowClick(row);
+    _bb.call(onRowClick, row);
 }
 
 </script>

packages/standard-components/src/button.svelte

@@ -1,27 +1,61 @@
 <script>
+import cssVars from "./cssVars";
+import {buildStyle} from "./buildStyle";
 export let className = "default";
 export let disabled = false;
 export let contentText;
 export let contentComponent;
 export let onClick = () => {};
+export let background;
+export let color;
+export let border;
+export let padding;
+export let hoverColor;
+export let hoverBackground;
+export let hoverBorder;
 
 export let _bb;
 let contentComponentContainer;
+let cssVariables;
+let buttonStyles;
+
+let customHoverColorClass;
+let customHoverBorderClass;
+let customHoverBackClass;
 
 $:{
 	if(_bb && contentComponentContainer && contentComponent._component)
 		_bb.initialiseComponent(contentComponent, contentComponentContainer);
+
+	cssVariables = {
+		hoverColor, hoverBorder,
+		hoverBackground
+	};
+
+	buttonStyles = buildStyle({
+		background, color, border, padding
+	})
+
+	customHoverColorClass = hoverColor ? "customHoverColor" : "";
+	customHoverBorderClass = hoverBorder ? "customHoverBorder" : "";
+	customHoverBackClass = hoverBackground ? "customHoverBack" : "";
 }
 
 
+
+
 const clickHandler = () => {
-	if(onClick) onClick();
+	_bb.call(onClick);
 }
 
 </script>
 
 
-<button class={className} {disabled} on:click={clickHandler}>
+<button use:cssVars={cssVariables} 
+		class="{className} {customHoverColorClass} {customHoverBorderClass} {customHoverBackClass}" 
+		{disabled} 
+		on:click={clickHandler} 
+		style={buttonStyles}>
     {#if contentComponent && contentComponent._component}
 	<div bind:this={contentComponentContainer}>
 	</div>
@@ -56,4 +90,15 @@ const clickHandler = () => {
 	border-color: #666;
 }
 
+.customHoverBorder:hover {
+	border: var(--hoverBorder);
+}
+
+.customHoverColor:hover {
+	color: var(--hoverColor);
+}
+
+.customHoverBack:hover {
+	background: var(--hoverBackground);
+}
 </style>

packages/standard-components/src/generators.js

@@ -0,0 +1,6 @@
+export { app } from "./generators/appGenerator";
+export { forms } from "./generators/formsGenerator";
+export { buttons } from "./generators/buttonsGenerator";
+export { headers } from "./generators/headersGenerator";
+export { nav } from "./generators/navGenerator";
+export { indexTables } from "./generators/indexTablesGenerator";

packages/standard-components/src/generators/appGenerator.js

@@ -0,0 +1,11 @@
+import { forms } from "./formsGenerator";
+import { nav } from "./navGenerator";
+
+export const app = (params) => {
+
+    return [
+        ...nav(params),
+        ...forms(params)
+    ];
+}
+

packages/standard-components/src/generators/buttonsGenerator.js

@@ -0,0 +1,28 @@
+export const buttons = () => [
+    {
+        name: "common/Primary Button",
+        description: "a styled button",
+        inherits: "@budibase/standard-components/button",
+        props: {
+            padding: "5px 7px",
+            border: "1px solid #EEE",
+            color: "#5F6368",
+            background: "##f2f2f2",
+            hoverColor: "black",
+            hoverBackground: "#cccccc"
+        }
+    },
+    {
+        name: "common/Secondary Button",
+        description: "a styled button",
+        inherits: "@budibase/standard-components/button",
+        props: {
+            padding: "5px 7px",
+            border: "1px solid #EEE",
+            color: "#5F6368",
+            background: "##f2f2f2",
+            hoverColor: "black",
+            hoverBackground: "#cccccc"
+        }
+    }
+]

packages/standard-components/src/generators/formsGenerator.js

@@ -0,0 +1,73 @@
+export const forms = ({records}) => 
+    records.map(root);
+
+const root = record => ({
+    name: `${record.name} Form`,
+    description: `All fields on record '${record.nodeKey()}' `,
+    inherits: "@budibase/standard-components/stackpanel",
+    props: {
+        direction: "vertical",
+        children: [
+            {
+                _component: "common/Header 1",
+                value: `Edit ${record.name}`,
+            },
+            form(record),
+            saveCancelButtons(record)
+        ]
+    }
+}) 
+
+const form = record => ({
+    _component: "@budibase/standard-components/form",
+    formControls: [
+        record.fields.map(f => ({
+            label: f.label,
+            control: {
+                _component: "@budibase/standard-components/textbox",
+                value: {
+                    "##bbstate":`current${record.name}.${f.name}`,
+                    "##bbsource":"store"
+                }
+            }
+        }))
+    ]
+})
+
+const saveCancelButtons = (record) => ({
+    _component: "@budibase/standard-components/stackpanel",
+    direction: "horizontal",
+    children: [
+        paddedPanelForButton({
+            _component: "common/Primary Button",
+            contentText: `Save ${record.name}`,
+            onClick: [                
+                {
+                    "##eventHandlerType": "Save Record",
+                    parameters: {
+                        statePath: `current${record.name}`,
+                    }
+                }
+            ]
+        }),
+        paddedPanelForButton({
+            _component: "common/Secondary Button",
+            contentText: `Cancel`,
+            onClick: [
+                {
+                    "##eventHandlerType": "Save Record",
+                    parameters: {
+                        statePath: `current${record.name}`,
+                    }
+                }
+            ]
+        })
+    ]
+})
+
+const paddedPanelForButton = (button) => ({
+    _component: "@budibase/standard-components/panel",
+    padding: "20px",
+    component: button
+});
+

packages/standard-components/src/generators/headersGenerator.js

@@ -0,0 +1,34 @@
+export const headers = () => [
+    {
+        name: "common/H1",
+        description: "Header 1",
+        inherits: "@budibase/standard-components/text",
+        props: {
+            font: "20pt",
+        }
+    },
+    {
+        name: "common/H2",
+        description: "Header 2",
+        inherits: "@budibase/standard-components/text",
+        props: {
+            font: "15pt",
+        }
+    },
+    {
+        name: "common/H3",
+        description: "Header 3",
+        inherits: "@budibase/standard-components/text",
+        props: {
+            font: "12pt bold",
+        }
+    },
+    {
+        name: "common/H4",
+        description: "Header 4",
+        inherits: "@budibase/standard-components/text",
+        props: {
+            font: "10pt bold",
+        }
+    }
+]

packages/standard-components/src/generators/indexTablesGenerator.js

@@ -0,0 +1,25 @@
+export const indexTables = ({indexes, helpers}) => 
+    indexes.filter(i => i.parent().type === "root")
+           .map(i => indexTable(i, helpers));
+
+export const indexTableProps = (index, helpers) => ({
+    data: {
+        "##bbstate":index.nodeKey(),
+        "##bbsource":"store"
+    },
+    columns: helpers.indexSchema(index).map(column)
+});
+
+const indexTable = (index, helpers) => ({
+    name: `tables/${index.name} Table`,
+    inherits: "@budibase/standard-components/table",
+    props: indexTableProps(index, helpers)
+});
+
+const column = (col) => ({
+    title: col.name,
+    value: {
+        "##bbstate": col.name,
+        "##bbsource":"context"
+    }
+})

packages/standard-components/src/generators/navGenerator.js

@@ -0,0 +1,21 @@
+import {indexTables} from "./indexTablesGenerator";
+
+export const nav = ({records, indexes, helpers}) => [
+    {
+        name: "Application Root",
+        inherits: "@budibase/standard-components/nav",
+        props: {
+            items: index.map(navItem)
+        }
+    },
+    ...indexTables({records, indexes, helpers})
+]
+
+
+export const navItem = (index) => ({
+    title: index.name,
+    component : {
+        _component: `tables/${index.name} Table`
+    }
+})
+