nav component and bug fixes

packages/client/src/api/authenticate.js

@@ -0,0 +1,24 @@
+
+export const USER_STATE_PATH = "_bbuser";
+
+export const authenticate = (api) => async ({username, password}) => {
+
+    if(!username) {
+        api.error("Authenticate: username not set");
+        return;
+    }  
+    
+    if(!password) {
+        api.error("Authenticate: password not set");
+        return;
+    } 
+
+    const user = await post({
+        url:`${rootPath}/api/authenticate`,
+        body : {username, password}
+    });
+
+    // set user even if error - so it is defined at least
+    api.setState(USER_STATE_PATH, user);
+    localStorage.setItem("budibase:user", user);
+}

packages/client/src/api/index.js

@@ -1,6 +1,7 @@
 import { ERROR } from "../state/standardState";
 import {loadRecord} from "./loadRecord";
 import {listRecords} from "./listRecords";
+import {authenticate} from "./authenticate";
 
 export const createApi = ({rootPath, setState, getState}) => {
 
@@ -54,7 +55,8 @@ export const createApi = ({rootPath, setState, getState}) => {
 
     return {
         loadRecord:loadRecord(apiOpts), 
-        listRecords: listRecords(apiOpts)
+        listRecords: listRecords(apiOpts),
+        authenticate: authenticate(apiOpts)
     }
 }
 

packages/client/src/core/createCoreApp.js

@@ -6,10 +6,9 @@ export const createCoreApp = (appDefinition, user) => {
         crypto:null,
         publish: () => {},
         hierarchy: appDefinition.hierarchy,
-        actions: appDefinition.actions
+        actions: appDefinition.actions,
+        user
     };
 
-    app.asUser(user);
-
     return app;
 }

packages/client/src/createApp.js

@@ -19,7 +19,8 @@ export const createApp = (componentLibraries, appDefinition, user) => {
 
         const component = new (componentLibraries[libName][componentName])({
             target: htmlElement,
-            props: {...initialProps, _app}
+            props: {...initialProps, _app},
+            hydrate:true
         });
 
         bind(component);
@@ -27,7 +28,9 @@ export const createApp = (componentLibraries, appDefinition, user) => {
     }
 
     const coreApi = createCoreApi(appDefinition, user);
-    const store = writable({});
+    const store = writable({
+        _bbuser: user
+    });
 
     const _app = {
         initialiseComponent, 

packages/client/src/state/eventHandlers.js

@@ -38,6 +38,8 @@ export const eventHandlers = (store,coreApi) => {
         "Get New Record": handler(
             ["collectionKey", "childRecordType", "statePath"], 
             getNewRecordToState(store, coreApi)),
+
+        "Authenticate": handler(["username", "password"], api.authenticate)
     };
 };
 

packages/client/src/state/stateBinding.js

@@ -87,9 +87,9 @@ export const setupBinding = (store, props, coreApi) => {
                     closuredHandlers.push(() => handlerType.execute(parameters));
                 }
 
-                newProps[boundHandler.propName] = () => {
+                newProps[boundHandler.propName] = async () => {
                     for(let runHandler of closuredHandlers) {
-                        runHandler();
+                        await runHandler();
                     }
                 }
 

packages/standard-components/components.json

@@ -106,12 +106,47 @@
 	"text": {
 		"importPath": "Text",
 		"name": "Text",
-		"desciption": "A div with text inside ",
+		"desciption": "stylable block of text",
 		"props" : {
 			"value": "string",
 			"containerClass": "string",
+			"font": "string",
+			"color": "string",
+			"textAlign": {
+				"type": "options", 
+				"default":"inline", 
+				"options": [
+					"left", "center", "right"
+				]
+			},
+			"verticalAlign": {
+				"type": "options", 
+				"default":"inline", 
+				"options": [
+					"top", "middle", "bottom"
+				]
+			},
+			"display": {
+				"type": "options", 
+				"default":"inline", 
+				"options": [
+					"inline", "block", "inline-block"
+				]
+			}
+		},
+		"tags": ["div", "container"]
+	},
+	"panel": {
+		"importPath": "Panel",
+		"name": "Panel",
+		"desciption": "A stylable div with a component inside",
+		"props" : {
+			"text": "string",
+			"component": "component",
+			"containerClass": "string",
 			"background": "string",
 			"border": "string",
+			"borderRadius":"string",
 			"font": "string",
 			"color": "string",
 			"padding": "string",
@@ -124,5 +159,29 @@
 			}
 		},
 		"tags": ["div", "container"]
+	},
+	"nav": {
+		"importPath": "Nav",
+		"name": "Nav",
+		"desciption": "A nav - a side bar of buttons that control the currently active component",
+		"props" : {
+			"navBarBackground": {"type" :"string", "default":"silver"},
+			"navBarBorder": "string",
+			"navBarColor": {"type" :"string", "default":"black"},
+			"selectedItemBackground": {"type" :"string", "default":"white"},
+			"selectedItemColor": {"type" :"string", "default":"black"},
+			"selectedItemBorder": "string",
+			"itemHoverBackground": {"type" :"string", "default":"gainsboro"},
+			"itemHoverColor": {"type" :"string", "default":"black"},
+			"items": {
+				"type": "array",
+				"elementDefinition" : {
+					"title": "string",
+					"component": "component"
+				}
+			}
+
+		},
+		"tags": ["nav", "navigation", "sidebar"]
 	}
 }

packages/standard-components/public/bundle.css

@@ -1,8 +1,9 @@
 #current_component.svelte-1xqz9vm{height:100%;width:100%}
 .root.svelte-1oto99m{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-1oto99m{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-1oto99m{margin-bottom:20px
 }.logo-container.svelte-1oto99m>img.svelte-1oto99m{max-width:100%}.login-button-container.svelte-1oto99m{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-1oto99m{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-1oto99m{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-1oto99m{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-1oto99m{grid-column-start:control;padding:5px 10px}
-.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}
+.root.svelte-10kw8to{display:grid}
+.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}
 .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%}
 .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}
 

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

@@ -4,19 +4,21 @@
   "sources": [
     "..\\src\\Test\\TestApp.svelte",
     "..\\src\\Login.svelte",
-    "..\\src\\Grid.svelte",
     "..\\src\\Textbox.svelte",
+    "..\\src\\Grid.svelte",
+    "..\\src\\Nav.svelte",
     "..\\src\\Form.svelte",
     "..\\src\\Button.svelte"
   ],
   "sourcesContent": [
-    "<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _app;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _app = a);\n\nconst testProps = props.grid;\n\nlet currentComponent;\n\n$: {\n    if(_app && currentComponent) {\n        _app.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _app}\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>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _app;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _app = a);\n\nconst testProps = props.nav;\n\nlet currentComponent;\n\n$: {\n    if(_app && currentComponent) {\n        _app.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _app}\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>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n    busy = true;\n    authenticate(username, password)\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            // reload page\n        } else {\n            incorrect = true;\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                <Textbox bind:value={username} />\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={password} hideValue=true />\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</style>",
+    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nexport let _app;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n    busy = true;\n    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                <Textbox bind:value={username} />\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={password} hideValue=true />\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</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 _app;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_app && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _app.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\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _app;\n\nlet actualValue = \"\";\n$: {\n\tif(_app && value._isstate) {\n\t\t_app.store.subscribe(s => {\n\t\t\tactualValue = _app.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_app && value._isstate) {\n\t\t_app.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\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 _app;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_app && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _app.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>\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\n\r\nexport let _app;\r\n\r\nlet selectedIndex;\r\nlet contentElement;\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\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    _app.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    <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    <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>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _app;\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(_app && htmlElements) {\n        for(let el in htmlElements) {\n            _app.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>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\n\nexport let _app;\nlet contentComponentContainer;\n\n$:{\n\tif(_app && contentComponentContainer)\n\t\t_app.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click>\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>"
+    "<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _app;\nlet contentComponentContainer;\n\n$:{\n\tif(_app && contentComponentContainer && contentComponent._component)\n\t\t_app.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": "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"
+  "mappings": "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"
 }

packages/standard-components/public/global.css

@@ -7,7 +7,7 @@ html, body {
 body {
 	color: #333;
 	margin: 0;
-	padding: 8px;
+	padding: 0;
 	box-sizing: border-box;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }

packages/standard-components/rollup.config.js

@@ -12,7 +12,9 @@ export default {
 		}
 	],
 	plugins: [
-		svelte(),
+		svelte({
+			hydratable:true
+		}),
 		resolve()
 	]
 };

packages/standard-components/rollup.testconfig.js

@@ -38,7 +38,9 @@ export default {
 			// a separate file — better for performance
 			css: css => {
 				css.write('public/bundle.css');
-			}
+			},
+			
+			hydratable:true
 		}),
 
 		// If you have external dependencies installed from

packages/standard-components/src/Login.svelte

@@ -12,6 +12,8 @@ export let loginRedirect = "";
 export let logo = "";
 export let buttonClass = "";
 
+export let _app;
+
 let username = "";
 let password = "";
 let busy = false;
@@ -23,9 +25,16 @@ const login = () => {
     .then(r => {
         busy = false;
         if(r.status === 200) {
-            // reload page
+            return r.json();
         } else {
             incorrect = true;
+            return;
+        }
+    })
+    .then(user => {
+        if(user) {
+            localStorage.setItem("budibase:user", user);
+            location.reload();
         }
     })
 }

packages/standard-components/src/Nav.svelte

@@ -0,0 +1,86 @@
+<script>
+import cssVars from "./cssVars";
+
+export let navBarBackground = "";
+export let navBarBorder="";
+export let navBarColor="";
+export let selectedItemBackground="";
+export let selectedItemColor="";
+export let selectedItemBorder="";
+export let itemHoverBackground="";
+export let itemHoverColor="";
+export let items = []
+
+export let _app;
+
+let selectedIndex;
+let contentElement;
+
+$: styleVars = {
+    navBarBackground, navBarBorder,
+    navBarColor, selectedItemBackground,
+    selectedItemColor, selectedItemBorder,
+    itemHoverBackground, itemHoverColor
+}
+
+const onSelectItem = (index) => () => {
+    selectedIndex = index;
+    _app.initialiseComponent(items[index].component, contentElement);
+}
+
+
+</script>
+
+<div class="root" use:cssVars={styleVars}>
+    <div class="navbar">
+        {#each items as navItem, index}
+        <div class="navitem"
+             on:click={onSelectItem(index)}
+             class:selected={selectedIndex === index}>
+            {navItem.title}
+        </div>
+        {/each}
+    </div>
+    <div class="content"
+         bind:this={contentElement}>
+    </div>
+</div>
+
+<style>
+
+.root {
+    height: 100%;
+    width:100%;
+    grid-template-columns: [navbar] auto [content] 1fr;
+    display: grid;
+}
+
+.navbar {
+    grid-column: navbar;
+    background: var(--navBarBackground);
+    border: var(--navBarBorder);
+    color: var(--navBarColor);
+}
+
+.navitem {
+    padding: 10px 17px;
+    cursor: pointer;
+}
+
+.navitem:hover {
+    background: var(--itemHoverBackground);
+    color: var(--itemHoverColor);
+}
+
+.navitem.selected {
+    background: var(--selectedItemBackground);
+    border: var(--selectedItemBorder);
+    color: var(--selectedItemColor);
+}
+
+.content {
+    grid-column: content;
+}
+
+</style>
+

packages/standard-components/src/Panel.svelte

@@ -0,0 +1,40 @@
+<script>
+import {buildStyle} from "./buildStyle";
+
+export let component="";
+export let text="";
+export let containerClass="";
+export let background="";
+export let border="";
+export let borderRadius="";
+export let font="";
+export let display="";
+export let textAlign="";
+export let color="";
+export let padding="";
+
+export let _app;
+
+let style="";
+let componentElement;
+
+$: {
+    style=buildStyle({
+        border, background, font, 
+        padding, display, color,
+        "text-align": textAlign,
+        "border-radius":borderRadius
+    });
+
+    if(_app && component) {
+        _app.initialiseComponent(component, componentElement);
+    }
+}
+
+</script>
+
+<div class={containerClass}
+     style={style}
+     this:bind={componentElement}>
+    {text}
+</div>

packages/standard-components/src/Test/TestApp.svelte

@@ -7,7 +7,7 @@ let _app;
 const _appPromise = createApp();
 _appPromise.then(a => _app = a);
 
-const testProps = props.grid;
+const testProps = props.nav;
 
 let currentComponent;
 

packages/standard-components/src/Test/createApp.js

@@ -4,6 +4,8 @@ import Grid from "../Grid.svelte";
 import Form from "../Form.svelte";
 import Textbox from "../Textbox.svelte";
 import Text from "../Text.svelte";
+import Nav from "../Nav.svelte";
+import Panel from "../Panel.svelte";
 import { createApp } from "@budibase/client/src/createApp";
 
 export default async () =>  {
@@ -14,27 +16,15 @@ export default async () =>  {
             grid : Grid,
             form : Form,
             textbox : Textbox,
-            text: Text
+            text: Text,
+            nav: Nav,
+            panel: Panel
         }
     }
 
-    return createApp(componentLibraries);
+    const appDef = {hierarchy:{}, actions:{}};
+    const user = {name:"yeo", permissions:[]};
    
-    const initialiseComponent = (props, htmlElement) => {
+    return createApp(componentLibraries, appDef, user);
-
-        new (components[props._component])({
-            target: htmlElement,
-            props: {...props, _app}
-        });
 
 }
-
-    const store = writable({});
-
-    const _app = {
-        initialiseComponent, 
-        store
-    };
-
-    return _app;
-}

packages/standard-components/src/Test/props.js

@@ -21,6 +21,41 @@ export const props = {
         ]
     },
 
+    nav: {
+        _component: "components/nav",
+        navBarBackground: "red",
+        navBarBorder: "1px solid maroon",
+        navBarColor: "black",
+        selectedItemBackground: "maroon",
+        selectedItemColor: "white",
+        selectedItemBorder: "green",
+        itemHoverBackground: "yellow",
+        itemHoverColor: "pink",
+        items: [
+            {
+                title: "People",
+                component: {
+                    _component: "components/panel",
+                    text:"People Panel",
+                    padding: "40px",
+                    border: "2px solid pink",
+                    background: "mistyrose"
+
+                }
+            },
+            {
+                title: "Animals",
+                component: {
+                    _component: "components/panel",
+                    text:"Animals Panel",
+                    padding: "40px",
+                    border: "2px solid green",
+                    background: "azure"
+                }
+            }
+        ]
+    },
+
     grid: {
         _component: "components/grid",
         gridTemplateColumns: "[left] auto [center] auto [right] auto",

packages/standard-components/src/Text.svelte

@@ -4,13 +4,11 @@ import {buildStyle} from "./buildStyle";
 export let value="";
 export let containerClass="";
 
-export let background="";
-export let border="";
 export let font="";
-export let display="";
 export let textAlign="";
+export let verticalAlign=""
 export let color="";
-export let padding="";
+export let display="";
 
 export let _app;
 
@@ -19,9 +17,9 @@ let style="";
 
 $: {
     style=buildStyle({
-        border, background, font, 
+        font,  verticalAlign, color, 
-        padding, display, color,
+        "text-align": textAlign,
-        "text-align": textAlign
+        "vertical-align": verticalAlign
     });
 }
 

packages/standard-components/src/cssVars.js

@@ -0,0 +1,21 @@
+// https://github.com/kaisermann/svelte-css-vars
+
+export default (node, props) => {
+    Object.entries(props).forEach(([key, value]) => {
+      node.style.setProperty(`--${key}`, value);
+    });
+  
+    return {
+      update(new_props) {
+        Object.entries(new_props).forEach(([key, value]) => {
+          node.style.setProperty(`--${key}`, value);
+          delete props[key];
+        });
+  
+        Object.keys(props).forEach(name =>
+          node.style.removeProperty(`--${name}`),
+        );
+        props = new_props;
+      },
+    };
+  };