Work on Components API & bugfixes (#102)

* typo - screens not being sent to page save

* removed children arg from hydrateChildren (n/a)

* initialiseChildren does not rerender unless forced

* removed derivatives of initialiseChildren

* renamed initialiseChildren > attachChildren

* standard-components - refactoring

div now container
H1, h2... etc now Heading with type
Select now takes option as _children

* loads of bug fixing

* safe props creation
anytime props are loaded,
we make sure they conform to the components props definition

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

@@ -10,7 +10,7 @@ export const formName = record => `${record.name}/${record.name} Form`
 const root = record => ({
   name: formName(record),
   description: `Control for creating/updating '${record.nodeKey()}' `,
-  inherits: "@budibase/standard-components/div",
+  inherits: "@budibase/standard-components/container",
   props: {
     className: "p-1",
     children: [
@@ -117,7 +117,7 @@ const saveCancelButtons = record => ({
 
 const paddedPanelForButton = button => ({
   control: {
-    _component: "@budibase/standard-components/div",
+    _component: "@budibase/standard-components/container",
     className: "btn-group",
     children: [
       {

packages/bootstrap-components/src/generators/recordHomePageGenerator.js

@@ -36,7 +36,7 @@ export const homepageComponentName = record =>
   `${record.name}/${record.name} homepage`
 
 const component = ({ record, index }) => ({
-  inherits: "@budibase/standard-components/div",
+  inherits: "@budibase/standard-components/container",
   name: homepageComponentName(record),
   props: {
     className: "d-flex flex-column h-100",
@@ -73,14 +73,14 @@ const component = ({ record, index }) => ({
 })
 
 const homePageButtons = ({ index, record }) => ({
-  inherits: "@budibase/standard-components/div",
+  inherits: "@budibase/standard-components/container",
   name: `${record.name}/homepage buttons`,
   props: {
     className: "btn-toolbar mt-4 mb-2",
     children: [
       {
         component: {
-          _component: "@budibase/standard-components/div",
+          _component: "@budibase/standard-components/container",
           className: "btn-group mr-3",
           children: [
             {
@@ -129,7 +129,7 @@ const homePageButtons = ({ index, record }) => ({
           _component: "@budibase/standard-components/if",
           condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`,
           thenComponent: {
-            _component: "@budibase/standard-components/div",
+            _component: "@budibase/standard-components/container",
             className: "btn-group",
             children: [
               {

packages/builder/src/builderStore/store.js

@@ -29,7 +29,9 @@ import { rename } from "../userInterface/pagesParsing/renameScreen"
 import {
   getNewScreen,
   createProps,
+  makePropsSafe,
 } from "../userInterface/pagesParsing/createProps"
+import { expandComponentDefinition } from "../userInterface/pagesParsing/types"
 import {
   loadLibs,
   loadLibUrls,
@@ -163,7 +165,9 @@ const initialise = (store, initial) => async () => {
   initial.accessLevels = pkg.accessLevels
   initial.screens = values(pkg.screens)
   initial.generators = generatorsArray(pkg.components.generators)
-  initial.components = values(pkg.components.components)
+  initial.components = values(pkg.components.components).map(
+    expandComponentDefinition
+  )
   initial.actions = values(pkg.appDefinition.actions)
   initial.triggers = pkg.appDefinition.triggers
 
@@ -465,14 +469,22 @@ const _saveScreen = async (store, s, screen) => {
   const currentPageScreens = s.pages[s.currentPageName]._screens
 
   await api
-    .post(`/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`, screen)
+    .post(
+      `/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`,
+      screen
+    )
     .then(async savedScreen => {
-      const updatedScreen = await savedScreen.json();
+      const updatedScreen = await savedScreen.json()
-      const screens = [...currentPageScreens.filter(storeScreen => storeScreen.name !== updatedScreen.name), updatedScreen];
+      const screens = [
+        ...currentPageScreens.filter(
+          storeScreen => storeScreen.name !== updatedScreen.name
+        ),
+        updatedScreen,
+      ]
       s.pages[s.currentPageName]._screens = screens
       s.screens = screens
-      _savePage(s);
+      _savePage(s)
-    });
+    })
 
   return s
 }
@@ -508,7 +520,11 @@ const setCurrentScreen = store => screenName => {
 
     s.currentPreviewItem = screen
     s.currentFrontEndType = "screen"
-    s.currentComponentInfo = screen.props
+
+    s.currentComponentInfo = makePropsSafe(
+      getContainerComponent(s.components),
+      screen.props
+    )
 
     setCurrentScreenFunctions(s)
     return s
@@ -575,7 +591,7 @@ const renameScreen = store => (oldname, newname) => {
     const saveAllChanged = async () => {
       for (let screenName of changedScreens) {
         const changedScreen = getExactComponent(screens, screenName)
-        const updatedScreen = await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
+        await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
       }
     }
 
@@ -620,7 +636,7 @@ const addComponentLibrary = store => async lib => {
     if (success) {
       const componentsArray = []
       for (let c in components) {
-        componentsArray.push(components[c])
+        componentsArray.push(expandComponentDefinition(components[c]))
       }
 
       s.components = pipe(s.components, [
@@ -671,6 +687,7 @@ const refreshComponents = store => async () => {
   const components = pipe(componentsAndGenerators.components, [
     keys,
     map(k => ({ ...componentsAndGenerators[k], name: k })),
+    map(c => expandComponentDefinition(c)),
   ])
 
   store.update(s => {
@@ -689,7 +706,7 @@ const _savePage = async s => {
   await api.post(`/_builder/api/${appname}/pages/${s.currentPageName}`, {
     page: { componentLibraries: s.pages.componentLibraries, ...page },
     uiFunctions: "{'1234':() => 'test return'}",
-    screens: page.screens,
+    screens: page._screens,
   })
 }
 
@@ -713,7 +730,10 @@ const setCurrentPage = store => pageName => {
     s.screens = Array.isArray(current_screens)
       ? current_screens
       : Object.values(current_screens)
-    s.currentComponentInfo = s.pages[pageName].props
+    s.currentComponentInfo = makePropsSafe(
+      getContainerComponent(s.components),
+      s.pages[pageName].props
+    )
     s.currentPreviewItem = s.pages[pageName]
 
     setCurrentScreenFunctions(s)
@@ -721,6 +741,9 @@ const setCurrentPage = store => pageName => {
   })
 }
 
+const getContainerComponent = components =>
+  components.find(c => c.name === "@budibase/standard-components/container")
+
 const addChildComponent = store => componentName => {
   store.update(s => {
     const component = s.components.find(c => c.name === componentName)
@@ -738,7 +761,8 @@ const addChildComponent = store => componentName => {
 
 const selectComponent = store => component => {
   store.update(s => {
-    s.currentComponentInfo = component
+    const componentDef = s.components.find(c => c.name === component._component)
+    s.currentComponentInfo = makePropsSafe(componentDef, component)
     return s
   })
 }
@@ -748,9 +772,11 @@ const setComponentProp = store => (name, value) => {
     const current_component = s.currentComponentInfo
     s.currentComponentInfo[name] = value
 
-    s.currentFrontEndType === "page"
+    if (s.currentFrontEndType) {
-      ? _savePage(s, s.currentPreviewItem)
+      _savePage(s)
-      : _saveScreen(store, s, s.currentPreviewItem)
+    } else {
+      _saveScreen(store, s, s.currentPreviewItem)
+    }
 
     s.currentComponentInfo = current_component
     return s

packages/builder/src/userInterface/PropControl.svelte

@@ -8,9 +8,7 @@
   export let index
   export let prop_name
   export let prop_value
-  export let prop_type = {}
+  export let prop_definition = {}
-
-  $: isOdd = index % 2 !== 0
 
   const setComponentProp = props => {
     setProp(propDef.____name, props)
@@ -18,12 +16,12 @@
 </script>
 
 <div class="root">
-  {#if prop_type !== 'event'}
+  {#if prop_definition.type !== 'event'}
     <h5>{prop_name}</h5>
     <StateBindingControl
       value={prop_value}
-      type={prop_type}
+      type={prop_definition.type}
-      options={prop_type.options}
+      options={prop_definition.options}
       onChanged={v => setProp(prop_name, v)} />
   {/if}
 </div>

packages/builder/src/userInterface/PropsView.svelte

@@ -10,46 +10,38 @@
   export let components
 
   let errors = []
-  let props = {}
   const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"]
   
-  $: propDefs =
+  $: componentDef = 
-    component &&
+      component && components &&
-    Object.entries(component).filter(
+      components.find(({ name }) => name === component._component)
-      ([name]) => !props_to_ignore.includes(name)
+
-    )
   
-  function find_type(prop_name) {
-    if (!component._component) return
-    return components.find(({ name }) => name === component._component).props[
-      prop_name
-    ]
-  }
 
   let setProp = (name, value) => {
     onPropChanged(name, value)
   }
 
-  const fieldHasError = propName => some(e => e.propName === propName)(errors)
 </script>
 
 <div class="root">
 
   <form class="uk-form-stacked form-root">
-    {#each propDefs as [prop_name, prop_value], index}
+    {#if componentDef}
+    {#each Object.entries(componentDef.props) as [prop_name, prop_def], index}
       <div class="prop-container">
 
         <PropControl
           {setProp}
           {prop_name}
-          {prop_value}
+          prop_value={component[prop_name]}
-          prop_type={find_type(prop_name)}
+          prop_definition={prop_def}
           {index}
           disabled={false} />
 
       </div>
     {/each}
-
+    {/if}
   </form>
 
 </div>

packages/builder/src/userInterface/StateBindingControl.svelte

@@ -23,7 +23,7 @@
       class="uk-select uk-form-small"
       {value}
       on:change={ev => onChanged(ev.target.value)}>
-      {#each options as option}
+      {#each (options || []) as option}
         <option value={option}>{option}</option>
       {/each}
     </select>

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

@@ -51,6 +51,21 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   }
 }
 
+export const makePropsSafe = (componentDefinition, props) => {
+  const safeProps = createProps(componentDefinition, props).props
+  for (let propName in safeProps) {
+    props[propName] = safeProps[propName]
+  }
+
+  for (let propName in props) {
+    if (safeProps[propName] === undefined) {
+      delete props[propName]
+    }
+  }
+
+  return props
+}
+
 const parsePropDef = propDef => {
   const error = message => ({ error: message, propDef })
 

packages/builder/tests/buildStateOrigins.spec.js

@@ -5,8 +5,9 @@ it("builds the correct stateOrigins object from a screen definition with handler
     "name": "screen1",
     "description": "",
     "props": {
-    "_component": "@budibase/standard-components/div",
+    "_component": "@budibase/standard-components/container",
       "className": "",
+      "type": "div",
       "onClick": [
         {
           "##eventHandlerType": "Set State",

packages/cli/src/commands/new/appPackageTemplate/pages/main/page.json

@@ -4,9 +4,10 @@
 	"stylesheets": [],
 	"componentLibraries": ["@budibase/standard-components"],
 	"props" : {
-		"_component": "@budibase/standard-components/div",
+		"_component": "@budibase/standard-components/container",
 		"_children": [],
 		"_id": 0,
+		"type": "div",
 		"_styles": {
 			"layout": {},
 			"position": {}

packages/cli/src/commands/new/appPackageTemplate/pages/unauthenticated/page.json

@@ -4,9 +4,10 @@
 	"stylesheets": [],
 	"componentLibraries": ["@budibase/standard-components"],
 	"props" : {
-		"_component": "@budibase/standard-components/div",
+		"_component": "@budibase/standard-components/container",
 		"_children": [],
 		"_id": 1,
+		"type": "div",
 		"_styles": {
 			"layout": {},
 			"position": {}

packages/client/src/createApp.js

@@ -4,7 +4,7 @@ import { getStateOrValue } from "./state/getState"
 import { setState, setStateFromBinding } from "./state/setState"
 import { trimSlash } from "./common/trimSlash"
 import { isBound } from "./state/isState"
-import { initialiseChildren } from "./render/initialiseChildren"
+import { attachChildren } from "./render/attachChildren"
 import { createTreeNode } from "./render/renderComponent"
 import { screenRouter } from "./render/screenRouter"
 
@@ -59,14 +59,13 @@ export const createApp = (
 
   const onScreenSlotRendered = screenSlotNode => {
     const onScreenSelected = (screen, store, url) => {
-      const { getInitialiseParams, unsubscribe } = initialiseChildrenParams(
+      const { getInitialiseParams, unsubscribe } = attachChildrenParams(store)
-        store
+      screenSlotNode.props._children = [screen.props]
-      )
+      const initialiseChildParams = getInitialiseParams(screenSlotNode)
-      const initialiseChildParams = getInitialiseParams(true, screenSlotNode)
+      attachChildren(initialiseChildParams)(screenSlotNode.rootElement, {
-      initialiseChildren(initialiseChildParams)(
+        hydrate: true,
-        [screen.props],
+        force: true,
-        screenSlotNode.rootElement
+      })
-      )
       if (currentScreenUbsubscribe) currentScreenUbsubscribe()
       currentScreenUbsubscribe = unsubscribe
       currentScreenStore = store
@@ -77,20 +76,19 @@ export const createApp = (
     routeTo(currentUrl || window.location.pathname)
   }
 
-  const initialiseChildrenParams = store => {
+  const attachChildrenParams = store => {
     let currentState = null
     const unsubscribe = store.subscribe(s => {
       currentState = s
     })
 
-    const getInitialiseParams = (hydrate, treeNode) => ({
+    const getInitialiseParams = treeNode => ({
       bb: getBbClientApi,
       coreApi,
       store,
       document,
       componentLibraries,
       frontendDefinition,
-      hydrate,
       uiFunctions,
       treeNode,
       onScreenSlotRendered,
@@ -98,18 +96,7 @@ export const createApp = (
 
     const getBbClientApi = (treeNode, componentProps) => {
       return {
-        hydrateChildren: initialiseChildren(
+        attachChildren: attachChildren(getInitialiseParams(treeNode)),
-          getInitialiseParams(true, treeNode)
-        ),
-        appendChildren: initialiseChildren(
-          getInitialiseParams(false, treeNode)
-        ),
-        insertChildren: (props, htmlElement, anchor) =>
-          initialiseChildren(getInitialiseParams(false, treeNode))(
-            props,
-            htmlElement,
-            anchor
-          ),
         context: treeNode.context,
         props: componentProps,
         call: safeCallEvent,
@@ -134,10 +121,17 @@ export const createApp = (
     currentUrl = urlPath
 
     rootTreeNode = createTreeNode()
-    const { getInitialiseParams } = initialiseChildrenParams(pageStore)
+    rootTreeNode.props = {
-    const initChildParams = getInitialiseParams(true, rootTreeNode)
+      _children: [page.props],
+    }
+    rootTreeNode.rootElement = target
+    const { getInitialiseParams } = attachChildrenParams(pageStore)
+    const initChildParams = getInitialiseParams(rootTreeNode)
 
-    initialiseChildren(initChildParams)([page.props], target)
+    attachChildren(initChildParams)(target, {
+      hydrate: true,
+      force: true,
+    })
 
     return rootTreeNode
   }

packages/client/src/render/attachChildren.js

@@ -4,11 +4,7 @@ import { $ } from "../core/common"
 import { renderComponent } from "./renderComponent"
 import { isScreenSlot } from "./builtinComponents"
 
-export const initialiseChildren = initialiseOpts => (
+export const attachChildren = initialiseOpts => (htmlElement, options) => {
-  childrenProps,
-  htmlElement,
-  anchor = null
-) => {
   const {
     uiFunctions,
     bb,
@@ -17,10 +13,15 @@ export const initialiseChildren = initialiseOpts => (
     componentLibraries,
     treeNode,
     frontendDefinition,
-    hydrate,
     onScreenSlotRendered,
   } = initialiseOpts
 
+  const anchor = options && options.anchor ? options.anchor : null
+  const force = options ? options.force : false
+  const hydrate = options ? options.hydrate : true
+
+  if (!force && treeNode.children.length > 0) return treeNode.children
+
   for (let childNode of treeNode.children) {
     childNode.destroy()
   }
@@ -34,7 +35,7 @@ export const initialiseChildren = initialiseOpts => (
   htmlElement.classList.add(`lay-${treeNode.props._id}`)
 
   const renderedComponents = []
-  for (let childProps of childrenProps) {
+  for (let childProps of treeNode.props._children) {
     const { componentName, libName } = splitName(childProps._component)
 
     if (!componentName || !libName) return
@@ -74,6 +75,8 @@ export const initialiseChildren = initialiseOpts => (
     }
   }
 
+  treeNode.children = renderedComponents
+
   return renderedComponents
 }
 

packages/client/src/render/renderComponent.js

@@ -39,7 +39,7 @@ export const renderComponent = ({
 
     thisNode.rootElement = htmlElement.children[htmlElement.children.length - 1]
 
-    if (initialProps._id) {
+    if (initialProps._id && thisNode.rootElement) {
       thisNode.rootElement.classList.add(`pos-${initialProps._id}`)
     }
   }

packages/client/src/render/screenSlotComponent.js

@@ -2,7 +2,7 @@ export const screenSlotComponent = window => {
   return function(opts) {
     const node = window.document.createElement("DIV")
     const $set = props => {
-      props._bb.hydrateChildren(props._children, node)
+      props._bb.attachChildren(node)
     }
     const $destroy = () => {
       if (opts.target && node) opts.target.removeChild(node)

packages/client/tests/testAppDef.js

@@ -111,13 +111,12 @@ const maketestlib = window => ({
           for (let c of childNodes) {
             node.removeChild(c)
           }
-          const components = currentProps._bb.appendChildren(
+          const components = currentProps._bb.attachChildren(node, {
-            currentProps._children,
+            hydrate: false,
-            node
+          })
-          )
           childNodes = components.map(c => c.component._element)
         } else {
-          currentProps._bb.hydrateChildren(currentProps._children, node)
+          currentProps._bb.attachChildren(node)
         }
       }
     }

packages/materialdesign-components/src/Test/rootComponent.js

@@ -2,7 +2,7 @@ export const rootComponent = window => {
   return function(opts) {
     const node = window.document.createElement("DIV")
     const $set = props => {
-        props._bb.hydrateChildren(props._children, node)
+      props._bb.attachChildren(node)
     }
     const $destroy = () => {
       if (opts.target && node) opts.target.removeChild(node)

packages/server/appPackages/testApp/pages/main/page.json

@@ -9,6 +9,7 @@
     "./moreCustomComponents"
   ],
   "props": {
-    "_component": "@budibase/standard-components/div"
+    "_component": "@budibase/standard-components/container",
+		"type": "div"
   }
 }

packages/server/appPackages/testApp/pages/main/screens/screen1.json

@@ -2,7 +2,8 @@
   "name": "screen1",
   "description": "",
   "props": {
-	"_component": "@budibase/standard-components/div",
+	  "_component": "@budibase/standard-components/container",
-    "className": ""
+    "className": "",
+		"type": "div"
   }
 }

packages/server/appPackages/testApp/pages/main/screens/screen2.json

@@ -2,7 +2,8 @@
   "name": "screen2",
   "description": "",
   "props": {
-    "_component": "@budibase/standard-components/div",
+    "_component": "@budibase/standard-components/container",
-    "className": ""
+    "className": "",
+		"type": "div",
   }
 }

packages/server/appPackages/testApp/pages/unauthenticated/page.json

@@ -4,6 +4,7 @@
 	"stylesheets": ["my-styles.css"],
 	"componentLibraries": ["./customComponents","./moreCustomComponents"],
 	"props" : {
-		"_component": "@budibase/standard-components/div"
+		"_component": "@budibase/standard-components/container",
+		"type": "div",
 	}
 }

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

@@ -1,2 +1,2 @@
-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":[],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[],"nodeId":0},"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/div"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]};
+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":[],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[],"nodeId":0},"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/container"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/container","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/container","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]};
 window['##BUDIBASE_UIFUNCTIONS##'] = {'1234':() => 'test return'}

packages/server/appPackages/testApp/public/main/clientFrontendDefinition.js

@@ -1,2 +1,2 @@
-window['##BUDIBASE_FRONTEND_DEINITION##'] = {"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/div"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]};
+window['##BUDIBASE_FRONTEND_DEINITION##'] = {"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/container"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/container","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/container","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]};
 window['##BUDIBASE_FRONTEND_FUNCTIONS##'] = {'1234':() => 'test return'}

packages/server/appPackages/testApp2/appDefinition.json

@@ -215,7 +215,7 @@
             "_component": "@budibase/standard-components/if",
             "condition": "$store.isEditingcustomer",
             "thenComponent": {
-              "_component": "@budibase/standard-components/div",
+              "_component": "@budibase/standard-components/container",
               "children": [
                 {
                   "_component": "children#array_element#",
@@ -287,7 +287,7 @@
                       {
                         "_component": "children#array_element#",
                         "control": {
-                          "_component": "@budibase/standard-components/div",
+                          "_component": "@budibase/standard-components/container",
                           "children": [
                             {
                               "_component": "children#array_element#",
@@ -338,7 +338,7 @@
                       {
                         "_component": "children#array_element#",
                         "control": {
-                          "_component": "@budibase/standard-components/div",
+                          "_component": "@budibase/standard-components/container",
                           "children": [
                             {
                               "_component": "children#array_element#",
@@ -406,17 +406,17 @@
               "onLoad": []
             },
             "elseComponent": {
-              "_component": "@budibase/standard-components/div",
+              "_component": "@budibase/standard-components/container",
               "children": [
                 {
                   "_component": "children#array_element#",
                   "component": {
-                    "_component": "@budibase/standard-components/div",
+                    "_component": "@budibase/standard-components/container",
                     "children": [
                       {
                         "_component": "children#array_element#",
                         "component": {
-                          "_component": "@budibase/standard-components/div",
+                          "_component": "@budibase/standard-components/container",
                           "children": [
                             {
                               "_component": "children#array_element#",
@@ -502,7 +502,7 @@
                           "_component": "@budibase/standard-components/if",
                           "condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
                           "thenComponent": {
-                            "_component": "@budibase/standard-components/div",
+                            "_component": "@budibase/standard-components/container",
                             "children": [
                               {
                                 "_component": "children#array_element#",
@@ -682,7 +682,7 @@
             "_component": "@budibase/standard-components/if",
             "condition": "$store.isEditingContact",
             "thenComponent": {
-              "_component": "@budibase/standard-components/div",
+              "_component": "@budibase/standard-components/container",
               "children": [
                 {
                   "_component": "children#array_element#",
@@ -738,7 +738,7 @@
                       {
                         "_component": "children#array_element#",
                         "control": {
-                          "_component": "@budibase/standard-components/div",
+                          "_component": "@budibase/standard-components/container",
                           "children": [
                             {
                               "_component": "children#array_element#",
@@ -789,7 +789,7 @@
                       {
                         "_component": "children#array_element#",
                         "control": {
-                          "_component": "@budibase/standard-components/div",
+                          "_component": "@budibase/standard-components/container",
                           "children": [
                             {
                               "_component": "children#array_element#",
@@ -857,17 +857,17 @@
               "onLoad": []
             },
             "elseComponent": {
-              "_component": "@budibase/standard-components/div",
+              "_component": "@budibase/standard-components/container",
               "children": [
                 {
                   "_component": "children#array_element#",
                   "component": {
-                    "_component": "@budibase/standard-components/div",
+                    "_component": "@budibase/standard-components/container",
                     "children": [
                       {
                         "_component": "children#array_element#",
                         "component": {
-                          "_component": "@budibase/standard-components/div",
+                          "_component": "@budibase/standard-components/container",
                           "children": [
                             {
                               "_component": "children#array_element#",
@@ -953,7 +953,7 @@
                           "_component": "@budibase/standard-components/if",
                           "condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
                           "thenComponent": {
-                            "_component": "@budibase/standard-components/div",
+                            "_component": "@budibase/standard-components/container",
                             "children": [
                               {
                                 "_component": "children#array_element#",

packages/server/appPackages/testApp2/components/Contact/Contact Form.json

@@ -1,7 +1,7 @@
 {
   "name": "Contact/Contact Form",
   "description": "Control for creating/updating '/contacts/3-{id}' ",
-  "inherits": "@budibase/standard-components/div",
+  "inherits": "@budibase/standard-components/container",
   "props": {
     "className": "p-1",
     "children": [
@@ -49,7 +49,7 @@
           "children": [
             {
               "control": {
-                "_component": "@budibase/standard-components/div",
+                "_component": "@budibase/standard-components/container",
                 "className": "btn-group",
                 "children": [
                   {
@@ -78,7 +78,7 @@
             },
             {
               "control": {
-                "_component": "@budibase/standard-components/div",
+                "_component": "@budibase/standard-components/container",
                 "className": "btn-group",
                 "children": [
                   {

packages/server/appPackages/testApp2/components/Contact/Contact homepage.json

@@ -1,5 +1,5 @@
 {
-  "inherits": "@budibase/standard-components/div",
+  "inherits": "@budibase/standard-components/container",
   "name": "Contact/Contact homepage",
   "props": {
     "className": "d-flex flex-column h-100",

packages/server/appPackages/testApp2/components/Contact/homepage buttons.json

@@ -1,12 +1,12 @@
 {
-  "inherits": "@budibase/standard-components/div",
+  "inherits": "@budibase/standard-components/container",
   "name": "Contact/homepage buttons",
   "props": {
     "className": "btn-toolbar mt-4 mb-2",
     "children": [
       {
         "component": {
-          "_component": "@budibase/standard-components/div",
+          "_component": "@budibase/standard-components/container",
           "className": "btn-group mr-3",
           "children": [
             {
@@ -55,7 +55,7 @@
           "_component": "@budibase/standard-components/if",
           "condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
           "thenComponent": {
-            "_component": "@budibase/standard-components/div",
+            "_component": "@budibase/standard-components/container",
             "className": "btn-group",
             "children": [
               {

packages/server/appPackages/testApp2/components/customer/customer Form.json

@@ -1,7 +1,7 @@
 {
   "name": "customer/customer Form",
   "description": "Control for creating/updating '/customers/1-{id}' ",
-  "inherits": "@budibase/standard-components/div",
+  "inherits": "@budibase/standard-components/container",
   "props": {
     "className": "p-1",
     "children": [
@@ -62,7 +62,7 @@
           "children": [
             {
               "control": {
-                "_component": "@budibase/standard-components/div",
+                "_component": "@budibase/standard-components/container",
                 "className": "btn-group",
                 "children": [
                   {
@@ -91,7 +91,7 @@
             },
             {
               "control": {
-                "_component": "@budibase/standard-components/div",
+                "_component": "@budibase/standard-components/container",
                 "className": "btn-group",
                 "children": [
                   {

packages/server/appPackages/testApp2/components/customer/customer homepage.json

@@ -1,5 +1,5 @@
 {
-  "inherits": "@budibase/standard-components/div",
+  "inherits": "@budibase/standard-components/container",
   "name": "customer/customer homepage",
   "props": {
     "className": "d-flex flex-column h-100",

packages/server/appPackages/testApp2/components/customer/homepage buttons.json

@@ -1,12 +1,12 @@
 {
-  "inherits": "@budibase/standard-components/div",
+  "inherits": "@budibase/standard-components/container",
   "name": "customer/homepage buttons",
   "props": {
     "className": "btn-toolbar mt-4 mb-2",
     "children": [
       {
         "component": {
-          "_component": "@budibase/standard-components/div",
+          "_component": "@budibase/standard-components/container",
           "className": "btn-group mr-3",
           "children": [
             {
@@ -55,7 +55,7 @@
           "_component": "@budibase/standard-components/if",
           "condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
           "thenComponent": {
-            "_component": "@budibase/standard-components/div",
+            "_component": "@budibase/standard-components/container",
             "className": "btn-group",
             "children": [
               {

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

@@ -213,7 +213,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
           _component: "@budibase/standard-components/if",
           condition: "$store.isEditingcustomer",
           thenComponent: {
-            _component: "@budibase/standard-components/div",
+            _component: "@budibase/standard-components/container",
             children: [
               {
                 _component: "children#array_element#",
@@ -285,7 +285,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
                     {
                       _component: "children#array_element#",
                       control: {
-                        _component: "@budibase/standard-components/div",
+                        _component: "@budibase/standard-components/container",
                         children: [
                           {
                             _component: "children#array_element#",
@@ -329,7 +329,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
                     {
                       _component: "children#array_element#",
                       control: {
-                        _component: "@budibase/standard-components/div",
+                        _component: "@budibase/standard-components/container",
                         children: [
                           {
                             _component: "children#array_element#",
@@ -384,17 +384,17 @@ window["##BUDIBASE_APPDEFINITION##"] = {
             onLoad: [],
           },
           elseComponent: {
-            _component: "@budibase/standard-components/div",
+            _component: "@budibase/standard-components/container",
             children: [
               {
                 _component: "children#array_element#",
                 component: {
-                  _component: "@budibase/standard-components/div",
+                  _component: "@budibase/standard-components/container",
                   children: [
                     {
                       _component: "children#array_element#",
                       component: {
-                        _component: "@budibase/standard-components/div",
+                        _component: "@budibase/standard-components/container",
                         children: [
                           {
                             _component: "children#array_element#",
@@ -475,7 +475,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
                         condition:
                           "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
                         thenComponent: {
-                          _component: "@budibase/standard-components/div",
+                          _component: "@budibase/standard-components/container",
                           children: [
                             {
                               _component: "children#array_element#",
@@ -632,7 +632,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
           _component: "@budibase/standard-components/if",
           condition: "$store.isEditingContact",
           thenComponent: {
-            _component: "@budibase/standard-components/div",
+            _component: "@budibase/standard-components/container",
             children: [
               {
                 _component: "children#array_element#",
@@ -688,7 +688,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
                     {
                       _component: "children#array_element#",
                       control: {
-                        _component: "@budibase/standard-components/div",
+                        _component: "@budibase/standard-components/container",
                         children: [
                           {
                             _component: "children#array_element#",
@@ -732,7 +732,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
                     {
                       _component: "children#array_element#",
                       control: {
-                        _component: "@budibase/standard-components/div",
+                        _component: "@budibase/standard-components/container",
                         children: [
                           {
                             _component: "children#array_element#",
@@ -787,17 +787,17 @@ window["##BUDIBASE_APPDEFINITION##"] = {
             onLoad: [],
           },
           elseComponent: {
-            _component: "@budibase/standard-components/div",
+            _component: "@budibase/standard-components/container",
             children: [
               {
                 _component: "children#array_element#",
                 component: {
-                  _component: "@budibase/standard-components/div",
+                  _component: "@budibase/standard-components/container",
                   children: [
                     {
                       _component: "children#array_element#",
                       component: {
-                        _component: "@budibase/standard-components/div",
+                        _component: "@budibase/standard-components/container",
                         children: [
                           {
                             _component: "children#array_element#",
@@ -878,7 +878,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
                         condition:
                           "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
                         thenComponent: {
-                          _component: "@budibase/standard-components/div",
+                          _component: "@budibase/standard-components/container",
                           children: [
                             {
                               _component: "children#array_element#",

packages/server/utilities/builder/buildPage.js

@@ -151,6 +151,10 @@ const savePageJson = async (appPath, pageName, pkg) => {
     delete pkg.page.name
   }
 
+  if (pkg.page._screens) {
+    delete pkg.page._screens
+  }
+
   await writeJSON(pageFile, pkg.page, {
     spaces: 2,
   })

packages/standard-components/components.json

@@ -79,28 +79,28 @@
 		"tags": ["form"]
 	},
 	"select" : {
-		"name": "Input",
+		"name": "Select",
-		"description": "An HTML input",
+		"description": "An HTML <select> (dropdown)",
+		"props" : {
+			"value": "string",
+			"className": "string"
+		}
+	},
+	"option" : {
+		"name": "Option",
+		"description": "An HTML <option>, to be used with <select>",
 		"children": false,
 		"props" : {
 			"value": "string",
-			"options": {
+			"text": "string"
-				"type" : "array",
-				"elementDefinition" : {
-					"id":"string",
-					"value":"string"
 		}
 	},
-			"className": "string"
-		},
-		"tags": ["form"]
-	},
 	"text": {
 		"name": "Text",
 		"description": "stylable block of text",
 		"children": false,
 		"props" : {
-			"value": "string",
+			"text": "string",
 			"font": "string",
 			"color": "string",
 			"textAlign": {
@@ -116,116 +116,66 @@
 				"options": [
 					"top", "middle", "bottom"
 				]
+			},
+			"formattingTag": {
+				"type": "options", 
+				"default":"none", 
+				"options": [
+					"none",
+					"<b> - bold",
+					"<strong> - important",
+					"<i> - italic",
+					"<em> - emphasized",
+					"<mark> - marked text",
+					"<small> - small",
+					"<del> - deleted",
+					"<ins> - inserted",
+					"<sub> - subscript",
+					"<sup> - superscript"
+				]
 			}
 		},
 		"tags": ["div", "container"]
 	},
-	"nav": {
+	"container": {
-		"name": "Nav",
+		"name": "Container",
-		"description": "A nav - a side bar of buttons that control the currently active component",
+		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
-		"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"},
-			"selectedItem":"string",
-			"hideNavBar":"bool"
-
-		},
-		"tags": ["nav", "navigation", "sidebar"]
-	},
-	"table": {
-		"name": "Table",
-		"description": "An HTML table",
-		"props" : {
-			"data": "state",
-			"columns": {
-				"type": "array",
-				"elementDefinition" : {
-					"title": "string",
-					"value": "string"
-				}
-			},
-			"onRowClick":"event",
-			"tableClass": {"type":"string", "default":"table-default"},
-			"theadClass": {"type":"string", "default":"thead-default"},
-			"tbodyClass": {"type":"string", "default":"tbody-default"},
-			"trClass": {"type":"string", "default":"tr-default"},
-			"thClass": {"type":"string", "default":"th-default"}
-		},
-		"tags": ["table"]
-	},
-	"div": {
-		"name": "Div",
-		"description": "An HTML div tag",
 		"props" : {
 			"className":"string",
-			"onLoad": "event"
+			"onLoad": "event",
+			"type": {
+				"type": "options", 
+				"options": [
+					"article",
+					"aside",
+					"details",
+					"div",
+					"firgure",
+					"figcaption",
+					"footer",
+					"header",
+					"main",
+					"mark",
+					"nav",
+					"paragraph",
+					"summary"
+				],
+				"default": "div"
+			}
 		},
 		"container": true,
 		"tags": ["div", "container", "layout"]
 	},
-	"h1": {
+	"heading": {
-		"importPath": "h1",
+		"name": "Heading",
-		"name": "H1",
+		"description": "An HTML H1 - H6 tag",
-		"description": "An HTML H1 tag",
 		"props" : {
-			"text": "string",
+			"className":"string",
-			"className":"string"
+			"type": {
-		},
+				"type": "options",
-		"tags": []
+				"default": "h1",
-	},
+				"options": ["h1","h2","h3","h4","h5","h6"]
-	"h2": {
+			}
-		"importPath": "h2",
-		"name": "H2",
-		"description": "An HTML H2 tag",
-		"props" : {
-			"text": "string",
-			"className":"string"
-		},
-		"tags": []
-	},
-	"h3": {
-		"importPath": "h3",
-		"name": "H3",
-		"description": "An HTML H3 tag",
-		"props" : {
-			"text": "string",
-			"className":"string"
-		},
-		"tags": []
-	},
-	"h4": {
-		"importPath": "h4",
-		"name": "H4",
-		"description": "An HTML H4 tag",
-		"props" : {
-			"text": "string",
-			"className":"string"
-		},
-		"tags": []
-	},
-	"h5": {
-		"importPath": "h5",
-		"name": "H5",
-		"description": "An HTML H5 tag",
-		"props" : {
-			"text": "string",
-			"className":"string"
-		},
-		"tags": ["div", "container", "layout"]
-	},
-	"h6": {
-		"importPath": "h6",
-		"name": "H6",
-		"description": "An HTML H6 tag",
-		"props" : {
-			"text": "string",
-			"className":"string"
 		},
 		"tags": []
 	}

packages/standard-components/package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@budibase/client": "^0.0.16",
     "@nx-js/compiler-util": "^2.0.0",
+    "bcryptjs": "2.4.3",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",

packages/standard-components/public/bundle.css

@@ -1,8 +1,7 @@
-#current_component.svelte-uuhis1{height:100%;width:100%}
+#current_component.svelte-1u0yzf5{height:100%;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}
+.root.svelte-x36wrk{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-x36wrk{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-x36wrk{margin-bottom:20px}.logo-container.svelte-x36wrk>img.svelte-x36wrk{max-width:100%}.login-button-container.svelte-x36wrk{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-x36wrk{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-x36wrk{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-x36wrk{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-x36wrk{grid-column-start:control;padding:5px 10px}.default-input.svelte-x36wrk{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-x36wrk{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-x36wrk:active{background-color:#ddd}.default-button.svelte-x36wrk:focus{border-color:#666}
-.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
+.default.svelte-vmpdcw{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-vmpdcw:active{background-color:#ddd}.default.svelte-vmpdcw:focus{border-color:#666}.border.svelte-vmpdcw{border:var(--border)}.color.svelte-vmpdcw{color:var(--color)}.background.svelte-vmpdcw{background:var(--background)}.hoverBorder.svelte-vmpdcw:hover{border:var(--hoverBorder)}.hoverColor.svelte-vmpdcw:hover{color:var(--hoverColor)}.hoverBack.svelte-vmpdcw:hover{background:var(--hoverBackground)}
-}.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-gqjqs6{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-gqjqs6{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-gqjqs6{padding:10px 17px;cursor:pointer}.navitem.svelte-gqjqs6:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-gqjqs6{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-gqjqs6{grid-column:content}
-.default.svelte-1smqkrd{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-1smqkrd:active{background-color:#ddd}.default.svelte-1smqkrd:focus{border-color:#666}.border.svelte-1smqkrd{border:var(--border)}.color.svelte-1smqkrd{color:var(--color)}.background.svelte-1smqkrd{background:var(--background)}.hoverBorder.svelte-1smqkrd:hover{border:var(--hoverBorder)}.hoverColor.svelte-1smqkrd:hover{color:var(--hoverColor)}.hoverBack.svelte-1smqkrd:hover{background:var(--hoverBackground)}
+.table-default.svelte-1mfd3wk{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-1mfd3wk .thead-default .th-default.svelte-1mfd3wk{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-1mfd3wk .th-default.svelte-1mfd3wk{padding:0.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-1mfd3wk{text-align:inherit}.table-default.svelte-1mfd3wk .tbody-default .tr-default.svelte-1mfd3wk:hover{color:#212529;background-color:rgba(0, 0, 0, 0.075);cursor:pointer}
-.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}
 
 /*# sourceMappingURL=bundle.css.map */

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

@@ -3,18 +3,18 @@
   "file": "bundle.css",
   "sources": [
     "..\\src\\Test\\TestApp.svelte",
-    "..\\src\\Nav.svelte",
     "..\\src\\Login.svelte",
     "..\\src\\Button.svelte",
+    "..\\src\\Nav.svelte",
     "..\\src\\Table.svelte"
   ],
   "sourcesContent": [
-    "<script>\r\nimport createApp from \"./createApp\";\r\nimport { props } from \"./props\";\r\n\r\nlet _bb;\r\n\r\nconst _appPromise = createApp();\r\n_appPromise.then(a => _bb = a);\r\n\r\nconst testProps = props.divWithAFewControls;\r\n\r\nlet currentComponent;\r\n\r\n$: {\r\n    if(_bb && currentComponent) {\r\n        _bb.hydrateChildren(testProps._children, currentComponent);\r\n    }\r\n}\r\n\r\n\r\n\r\n</script>\r\n\r\n{#await _appPromise}\r\nloading\r\n{:then _bb}\r\n\r\n<div id=\"current_component\" bind:this={currentComponent}>\r\n</div>\r\n\r\n{/await}\r\n\r\n\r\n<style>\r\n#current_component {\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n</style>\r\n\r\n",
+    "<script>\r\n  import createApp from \"./createApp\"\r\n  import { form } from \"./props\"\r\n  let _bb\r\n  let currentComponent\r\n  let _appPromise\r\n\r\nconst autoAssignIds = (props, count = 0) => {\r\n  if (!props._id) {\r\n    props._id = `auto_id_${count}`\r\n  }\r\n  if (props._children) {\r\n    for (let child of props._children) {\r\n      count += 1\r\n      autoAssignIds(child, count)\r\n    }\r\n  }\r\n}\r\n\r\n  $: {\r\n    if (currentComponent) {\r\n      const _appPromise = createApp()\r\n      const page = {\r\n        props: form,\r\n      }\r\n\r\n      autoAssignIds(page.props)\r\n\r\n      _appPromise.then(initialise => {\r\n        initialise(page, currentComponent, \"\")\r\n      })\r\n    }\r\n  }\r\n</script>\r\n\r\n{#await _appPromise}\r\n  loading\r\n{:then _bb}\r\n  <div id=\"current_component\" bind:this={currentComponent} />\r\n{/await}\r\n\r\n<style>\r\n  #current_component {\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n</style>\r\n",
-    "<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 hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _children;\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(_children && _children.length > 0 && hasComponentElements()) {\r\n        const currentSelectedItem = selectedIndex > 0\r\n                                   ? _children[selectedIndex].title\r\n                                   : \"\";\r\n        if(selectedItem && currentSelectedItem !== selectedItem) {\r\n            let i=0;\r\n            for(let child of _children) {\r\n                if(child.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.hydrateChildren(\r\n            _children[index].children, 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 _children 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 _children as navItem, index}\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>\r\n  import Button from \"./Button.svelte\"\r\n\r\n  export let usernameLabel = \"Username\"\r\n  export let passwordLabel = \"Password\"\r\n  export let loginButtonLabel = \"Login\"\r\n  export let loginRedirect = \"\"\r\n  export let logo = \"\"\r\n  export let buttonClass = \"\"\r\n  export let inputClass = \"\"\r\n\r\n  export let _bb\r\n\r\n  let username = \"\"\r\n  let password = \"\"\r\n  let busy = false\r\n  let incorrect = false\r\n  let _logo = \"\"\r\n  let _buttonClass = \"\"\r\n  let _inputClass = \"\"\r\n\r\n  $: {\r\n    _logo = _bb.relativeUrl(logo)\r\n    _buttonClass = buttonClass || \"default-button\"\r\n    _inputClass = inputClass || \"default-input\"\r\n  }\r\n\r\n  const login = () => {\r\n    busy = true\r\n    _bb.api\r\n      .post(\"/api/authenticate\", { username, password })\r\n      .then(r => {\r\n        busy = false\r\n        if (r.status === 200) {\r\n          return r.json()\r\n        } else {\r\n          incorrect = true\r\n          return\r\n        }\r\n      })\r\n      .then(user => {\r\n        if (user) {\r\n          localStorage.setItem(\"budibase:user\", JSON.stringify(user))\r\n          location.reload()\r\n        }\r\n      })\r\n  }\r\n</script>\r\n\r\n<div class=\"root\">\r\n\r\n  <div class=\"content\">\r\n\r\n    {#if _logo}\r\n      <div class=\"logo-container\">\r\n        <img src={_logo} alt=\"logo\" />\r\n      </div>\r\n    {/if}\r\n\r\n    <div class=\"form-root\">\r\n      <div class=\"label\">{usernameLabel}</div>\r\n      <div class=\"control\">\r\n        <input bind:value={username} type=\"text\" class={_inputClass} />\r\n      </div>\r\n      <div class=\"label\">{passwordLabel}</div>\r\n      <div class=\"control\">\r\n        <input bind:value={password} type=\"password\" class={_inputClass} />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"login-button-container\">\r\n      <button disabled={busy} on:click={login} class={_buttonClass}>\r\n        {loginButtonLabel}\r\n      </button>\r\n    </div>\r\n\r\n    {#if incorrect}\r\n      <div class=\"incorrect-details-panel\">Incorrect username or password</div>\r\n    {/if}\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n<style>\r\n  .root {\r\n    height: 100%;\r\n    display: grid;\r\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\r\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\r\n  }\r\n\r\n  .content {\r\n    grid-column-start: middle;\r\n    grid-row-start: center;\r\n    width: 400px;\r\n  }\r\n\r\n  .logo-container {\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .logo-container > img {\r\n    max-width: 100%;\r\n  }\r\n\r\n  .login-button-container {\r\n    text-align: right;\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .incorrect-details-panel {\r\n    margin-top: 30px;\r\n    padding: 10px;\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    border-color: maroon;\r\n    border-radius: 1px;\r\n    text-align: center;\r\n    color: maroon;\r\n    background-color: mistyrose;\r\n  }\r\n\r\n  .form-root {\r\n    display: grid;\r\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\r\n  }\r\n\r\n  .label {\r\n    grid-column-start: label;\r\n    padding: 5px 10px;\r\n    vertical-align: middle;\r\n  }\r\n  .control {\r\n    grid-column-start: control;\r\n    padding: 5px 10px;\r\n  }\r\n\r\n  .default-input {\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    padding: 0.4em;\r\n    margin: 0 0 0.5em 0;\r\n    box-sizing: border-box;\r\n    border: 1px solid #ccc;\r\n    border-radius: 2px;\r\n    width: 100%;\r\n  }\r\n\r\n  .default-button {\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    padding: 0.4em;\r\n    margin: 0 0 0.5em 0;\r\n    box-sizing: border-box;\r\n    border: 1px solid #ccc;\r\n    border-radius: 2px;\r\n    color: #333;\r\n    background-color: #f4f4f4;\r\n    outline: none;\r\n  }\r\n\r\n  .default-button:active {\r\n    background-color: #ddd;\r\n  }\r\n\r\n  .default-button:focus {\r\n    border-color: #666;\r\n  }\r\n</style>\r\n",
-    "<script>\n\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\", JSON.stringify(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\n  import cssVars from \"./cssVars\"\r\n  import { buildStyle } from \"./buildStyle\"\r\n  export let className = \"default\"\r\n  export let disabled = false\r\n  export let contentText\r\n  export let onClick\r\n  export let background\r\n  export let color\r\n  export let border\r\n  export let padding\r\n  export let hoverColor\r\n  export let hoverBackground\r\n  export let hoverBorder\r\n\r\n  export let _bb\r\n  let theButton\r\n  let cssVariables\r\n  let buttonStyles\r\n\r\n  let customHoverColorClass\r\n  let customHoverBorderClass\r\n  let customHoverBackClass\r\n\r\n  let customClasses = \"\"\r\n\r\n  const createClasses = classes => {\r\n    let all = \"\"\r\n    for (let cls in classes) {\r\n      if (classes[cls]) {\r\n        all = all + \" \" + cls\r\n      }\r\n    }\r\n    return all\r\n  }\r\n\r\n  $: if(_bb.props._children.length > 0) theButton && _bb.attachChildren(theButton)\r\n\r\n  $: {\r\n    cssVariables = {\r\n      hoverColor,\r\n      hoverBorder,\r\n      hoverBackground,\r\n      background,\r\n      color,\r\n      border,\r\n    }\r\n\r\n    buttonStyles = buildStyle({\r\n      padding,\r\n    })\r\n\r\n    customClasses = createClasses({\r\n      hoverColor,\r\n      hoverBorder,\r\n      hoverBackground,\r\n      background,\r\n      border,\r\n      color,\r\n    })\r\n  }\r\n\r\n  const clickHandler = () => {\r\n    _bb.call(onClick)\r\n  }\r\n</script>\r\n\r\n<button\r\n  bind:this={theButton}\r\n  use:cssVars={cssVariables}\r\n  class=\"{className}\r\n  {customClasses}\"\r\n  disabled={disabled || false}\r\n  on:click={clickHandler}\r\n  style={buttonStyles}>\r\n  {#if _bb.props_children.length === 0}{contentText}{/if}\r\n</button>\r\n\r\n<style>\r\n  .default {\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    padding: 0.4em;\r\n    margin: 0 0 0.5em 0;\r\n    box-sizing: border-box;\r\n    border: 1px solid #ccc;\r\n    border-radius: 2px;\r\n    color: #333;\r\n    background-color: #f4f4f4;\r\n    outline: none;\r\n  }\r\n\r\n  .default:active {\r\n    background-color: #ddd;\r\n  }\r\n\r\n  .default:focus {\r\n    border-color: #666;\r\n  }\r\n\r\n  .border {\r\n    border: var(--border);\r\n  }\r\n\r\n  .color {\r\n    color: var(--color);\r\n  }\r\n\r\n  .background {\r\n    background: var(--background);\r\n  }\r\n\r\n  .hoverBorder:hover {\r\n    border: var(--hoverBorder);\r\n  }\r\n\r\n  .hoverColor:hover {\r\n    color: var(--hoverColor);\r\n  }\r\n\r\n  .hoverBack:hover {\r\n    background: var(--hoverBackground);\r\n  }\r\n</style>\r\n",
-    "<script>\r\nimport cssVars from \"./cssVars\";\r\nimport {buildStyle} from \"./buildStyle\";\r\nexport let className = \"default\";\r\nexport let disabled = false;\r\nexport let contentText;\r\nexport let onClick;\r\nexport let background;\r\nexport let color;\r\nexport let border;\r\nexport let padding;\r\nexport let hoverColor;\r\nexport let hoverBackground;\r\nexport let hoverBorder;\r\nexport let _children;\r\n\r\nexport let _bb;\r\nlet theButton;\r\nlet cssVariables;\r\nlet buttonStyles;\r\n\r\nlet customHoverColorClass;\r\nlet customHoverBorderClass;\r\nlet customHoverBackClass;\r\n\r\nlet customClasses = \"\";\r\n\r\nconst createClasses = (classes) => {\r\n\tlet all = \"\";\r\n\tfor(let cls in classes) {\r\n\t\tif(classes[cls]) {\r\n\t\t\tall = all + \" \" + cls;\r\n\t\t}\r\n\t}\r\n\treturn all;\r\n}\r\n\r\n$:{\r\n\tif(_bb && theButton && _children && _children.length)\r\n\t\t_bb.hydrateChildren(_children, theButton);\r\n}\r\n\r\n$:{\r\n\tcssVariables = {\r\n\t\thoverColor, hoverBorder,\r\n\t\thoverBackground,\r\n\t\tbackground, color, border,\r\n\t};\r\n\r\n\tbuttonStyles = buildStyle({\r\n\t\tpadding\r\n\t});\t\r\n\t\r\n\tcustomClasses = createClasses({\r\n\t\thoverColor, hoverBorder, hoverBackground,\r\n\t\tbackground, border, color\r\n\t});\r\n}\r\n\r\n\r\n\r\n\r\nconst clickHandler = () => {\r\n\t_bb.call(onClick);\r\n}\r\n\r\n</script>\r\n\r\n\r\n<button bind:this={theButton}\r\n\t\tuse:cssVars={cssVariables} \r\n\t\tclass=\"{className} {customClasses}\" \r\n\t\tdisabled={disabled || false} \r\n\t\ton:click={clickHandler} \r\n\t\tstyle={buttonStyles}>\r\n    {#if !_children || _children.length === 0}\r\n    {contentText}\r\n    {/if}\r\n</button>\r\n\r\n\r\n<style>\r\n\r\n.default {\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tpadding: 0.4em;\r\n\tmargin: 0 0 0.5em 0;\r\n\tbox-sizing: border-box;\r\n\tborder: 1px solid #ccc;\r\n\tborder-radius: 2px;\r\n\tcolor: #333;\r\n\tbackground-color: #f4f4f4;\r\n\toutline: none;\r\n}\r\n\r\n.default:active {\r\n\tbackground-color: #ddd;\r\n}\r\n\r\n.default:focus {\r\n\tborder-color: #666;\r\n}\r\n\r\n.border {\r\n\tborder: var(--border);\r\n}\r\n\r\n.color {\r\n\tcolor: var(--color);\r\n}\r\n\r\n.background {\r\n\tbackground: var(--background);\r\n}\r\n\r\n.hoverBorder:hover {\r\n\tborder: var(--hoverBorder);\r\n}\r\n\r\n.hoverColor:hover {\r\n\tcolor: var(--hoverColor);\r\n}\r\n\r\n.hoverBack:hover {\r\n\tbackground: var(--hoverBackground);\r\n}\r\n\r\n\r\n</style>",
+    "<script>\r\n  import cssVars from \"./cssVars\"\r\n\r\n  export let navBarBackground = \"\"\r\n  export let navBarBorder = \"\"\r\n  export let navBarColor = \"\"\r\n  export let selectedItemBackground = \"\"\r\n  export let selectedItemColor = \"\"\r\n  export let selectedItemBorder = \"\"\r\n  export let itemHoverBackground = \"\"\r\n  export let itemHoverColor = \"\"\r\n  export let hideNavBar = false\r\n  export let selectedItem = \"\"\r\n\r\n  export let _children\r\n  export let _bb\r\n\r\n  let selectedIndex = -1\r\n  let styleVars = {}\r\n  let components = {}\r\n  let componentElements = {}\r\n\r\n  const hasComponentElements = () =>\r\n    Object.getOwnPropertyNames(componentElements).length > 0\r\n\r\n  $: {\r\n    styleVars = {\r\n      navBarBackground,\r\n      navBarBorder,\r\n      navBarColor,\r\n      selectedItemBackground,\r\n      selectedItemColor,\r\n      selectedItemBorder,\r\n      itemHoverBackground,\r\n      itemHoverColor,\r\n    }\r\n\r\n    if (_children && _children.length > 0 && hasComponentElements()) {\r\n      const currentSelectedItem =\r\n        selectedIndex > 0 ? _children[selectedIndex].title : \"\"\r\n      if (selectedItem && currentSelectedItem !== selectedItem) {\r\n        let i = 0\r\n        for (let child of _children) {\r\n          if (child.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\n  const onSelectItem = index => () => {\r\n    selectedIndex = index\r\n    if (!components[index]) {\r\n      const comp = _bb.attachChildren(\r\n        componentElements[index]\r\n      )\r\n      components[index] = comp\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 _children as navItem, index}\r\n        <div\r\n          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 _children as navItem, index}\r\n    <div class=\"content\" bind:this={componentElements[index]} />\r\n  {/each}\r\n</div>\r\n\r\n<style>\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</style>\r\n",
-    "<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    _bb.call(onRowClick, row);\r\n}\r\n\r\nconst cellValue = (colIndex, row) => {\r\n    const val = _bb.getStateOrValue(\r\n        _bb.props.columns[colIndex].value\r\n        , row)\r\n    return val;\r\n}\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        {#if data}\r\n        {#each data as row}\r\n        <tr class={trClass}\r\n            on:click={rowClickHandler(row)} >\r\n            {#each columns as col, index}\r\n            <th class={thClass}>{cellValue(index, row)}</th>\r\n            {/each}\r\n        </tr>\r\n        {/each}\r\n        {/if}\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\n  export let columns = []\r\n  export let data = \"\"\r\n  export let tableClass = \"\"\r\n  export let theadClass = \"\"\r\n  export let tbodyClass = \"\"\r\n  export let trClass = \"\"\r\n  export let thClass = \"\"\r\n  export let onRowClick\r\n\r\n  export let _bb\r\n\r\n  const rowClickHandler = row => () => {\r\n    _bb.call(onRowClick, row)\r\n  }\r\n\r\n  const cellValue = (colIndex, row) => {\r\n    const val = _bb.getStateOrValue(_bb.props.columns[colIndex].value, row)\r\n    return val\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    {#if data}\r\n      {#each data as row}\r\n        <tr class={trClass} on:click={rowClickHandler(row)}>\r\n          {#each columns as col, index}\r\n            <th class={thClass}>{cellValue(index, row)}</th>\r\n          {/each}\r\n        </tr>\r\n      {/each}\r\n    {/if}\r\n  </tbody>\r\n</table>\r\n\r\n<style>\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: 0.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, 0.075);\r\n    cursor: pointer;\r\n  }\r\n</style>\r\n"
   ],
   "names": [],
-  "mappings": "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"
+  "mappings": "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"
 }

packages/standard-components/public/index.html

@@ -15,4 +15,5 @@
 <body>
 	<script src='/bundle.js'></script>	
 </body>
+
 </html>

packages/standard-components/rollup.testconfig.js

@@ -73,6 +73,7 @@ const coreExternal = [
   "safe-buffer",
   "shortid",
   "@nx-js/compiler-util",
+  "bcryptjs",
 ]
 
 export default {
@@ -82,6 +83,9 @@ export default {
     format: "iife",
     name: "app",
     file: "public/bundle.js",
+    globals: {
+      crypto: "crypto",
+    },
   },
   plugins: [
     svelte({

packages/standard-components/src/Container.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let className = ""
+  export let onLoad
+  export let type
+  export let _bb
+
+  let containerElement
+  let hasLoaded;
+  let currentChildren;
+
+  $: {
+    if(containerElement) {
+       _bb.attachChildren(containerElement)
+       if (!hasLoaded) {
+         _bb.call(onLoad)
+         hasLoaded = true
+       }
+    }
+  }
+
+</script>
+
+{#if type === "div"}
+<div class={className} bind:this={containerElement} />
+{:else if type === "header"}
+<header class={className} bind:this={containerElement} />
+{:else if type === "main"}
+<main class={className} bind:this={containerElement} />
+{:else if type === "footer"}
+<footer class={className} bind:this={containerElement} />
+{:else if type === "aside"}
+<aside class={className} bind:this={containerElement} />
+{:else if type === "summary"}
+<summary class={className} bind:this={containerElement} />
+{:else if type === "details"}
+<details class={className} bind:this={containerElement} />
+{:else if type === "article"}
+<article class={className} bind:this={containerElement} />
+{:else if type === "nav"}
+<nav class={className} bind:this={containerElement} />
+{:else if type === "mark"}
+<mark class={className} bind:this={containerElement} />
+{:else if type === "figure"}
+<figure class={className} bind:this={containerElement} />
+{:else if type === "figcaption"}
+<figcaption class={className} bind:this={containerElement} />
+{:else if type === "paragraph"}
+<p class={className} bind:this={containerElement} />
+{/if}

packages/standard-components/src/Div.svelte

@@ -1,14 +0,0 @@
-<script>
-  export let _children = []
-  export let className = ""
-  export let onLoad
-  export let _bb
-
-  let rootDiv
-  $: {
-    if (_bb && rootDiv && _children && _children.length)
-      _bb.hydrateChildren(_children, rootDiv)
-  }
-</script>
-
-<div class={className} bind:this={rootDiv} />

packages/standard-components/src/H1.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h1 class={className}>{text}</h1>

packages/standard-components/src/H2.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h1 class={className}>{text}</h1>

packages/standard-components/src/H3.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h3 class={className}>{text}</h3>

packages/standard-components/src/H4.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h4 class={className}>{text}</h4>

packages/standard-components/src/H5.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h6 class={className}>{text}</h6>

packages/standard-components/src/H6.svelte

@@ -1,10 +0,0 @@
-<script>
-  import { buildStyle } from "./buildStyle"
-
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h1 class={className}>{text}</h1>

packages/standard-components/src/Heading.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let className = ""
+  export let type
+  export let _bb
+
+  let containerElement
+
+  $: containerElement && _bb.attachChildren(containerElement)
+
+</script>
+
+{#if type === "h1"}
+<h1 class={className} bind:this={containerElement}></h1>
+{:else if type === "h2"}
+<h2 class={className} bind:this={containerElement}></h2>
+{:else if type === "h3"}
+<h3 class={className} bind:this={containerElement}></h3>
+{:else if type === "h4"}
+<h4 class={className} bind:this={containerElement}></h4>
+{:else if type === "h5"}
+<h5 class={className} bind:this={containerElement}></h5>
+{:else if type === "h6"}
+<h6 class={className} bind:this={containerElement}></h6>
+{/if}

packages/standard-components/src/Nav.svelte

@@ -55,8 +55,7 @@
   const onSelectItem = index => () => {
     selectedIndex = index
     if (!components[index]) {
-      const comp = _bb.hydrateChildren(
+      const comp = _bb.attachChildren(
-        _children[index].children,
         componentElements[index]
       )
       components[index] = comp

packages/standard-components/src/Option.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let value = ""
+  export let text = ""
+  export let _bb
+
+  let actualValue
+  let actualText
+
+  $: actualValue = value || text || ""
+  $: actualText = text || value || ""
+
+</script>
+
+<option value={actualValue}>{actualText}</option>

packages/standard-components/src/Select.svelte

@@ -1,12 +1,13 @@
 <script>
   export let value = ""
   export let className = ""
-  export let type = "text"
-  export let options = []
 
   export let _bb
 
   let actualValue = ""
+  let selectElement;
+
+  $: selectElement && _bb.attachChildren(selectElement)
 
   const onchange = ev => {
     if (_bb) {
@@ -15,9 +16,6 @@
   }
 </script>
 
-<select class={className} {value} on:change={onchange}>
+<select class={className} {value} on:change={onchange} bind:this={selectElement}>
-  <option />
+
-  {#each options as opt}
-    <option id={opt.id ? opt.id : opt.value}>{opt.value}</option>
-  {/each}
 </select>

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

@@ -1,19 +1,34 @@
 <script>
   import createApp from "./createApp"
-  import { props } from "./props"
+  import { form } from "./props"
-
   let _bb
-
-  const _appPromise = createApp()
-  _appPromise.then(a => (_bb = a))
-
-  const testProps = props.divWithAFewControls
-
   let currentComponent
+  let _appPromise
+
+const autoAssignIds = (props, count = 0) => {
+  if (!props._id) {
+    props._id = `auto_id_${count}`
+  }
+  if (props._children) {
+    for (let child of props._children) {
+      count += 1
+      autoAssignIds(child, count)
+    }
+  }
+}
 
   $: {
-    if (_bb && currentComponent) {
+    if (currentComponent) {
-      _bb.hydrateChildren(testProps._children, currentComponent)
+      const _appPromise = createApp()
+      const page = {
+        props: form,
+      }
+
+      autoAssignIds(page.props)
+
+      _appPromise.then(initialise => {
+        initialise(page, currentComponent, "")
+      })
     }
   }
 </script>
@@ -21,9 +36,7 @@
 {#await _appPromise}
   loading
 {:then _bb}
-
   <div id="current_component" bind:this={currentComponent} />
-
 {/await}
 
 <style>

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

@@ -1,40 +1,25 @@
-import { writable } from "svelte/store"
-import Login from "../Login.svelte"
-import Input from "../Input.svelte"
-import Text from "../Text.svelte"
-import Nav from "../Nav.svelte"
-import H1 from "../H1.svelte"
-import Div from "../Div.svelte"
-import Table from "../Table.svelte"
-import Button from "../Button.svelte"
 import { createApp } from "@budibase/client/src/createApp"
+import components from "./testComponents"
+import packageJson from "../../package.json"
+import { rootComponent } from "./rootComponent"
 
 export default async () => {
-  const componentLibraries = {
+  delete components._lib
-    components: {
+  const componentLibraries = {}
-      login: Login,
+  componentLibraries[packageJson.name] = components
-      input: Input,
+  componentLibraries["testcomponents"] = {
-      text: Text,
+    rootComponent: rootComponent(window),
-      nav: Nav,
-      table: Table,
-      button: Button,
-      div: Div,
-      h1: H1,
-    },
   }
-
   const appDef = { hierarchy: {}, actions: {} }
   const user = { name: "yeo", permissions: [] }
-
+  const { initialisePage } = createApp(
-  var app = createApp(componentLibraries, appDef, user)
+    window.document,
-  app.store.update(s => {
+    componentLibraries,
-    s.people = [
+    { appRootPath: "" },
-      { name: "bob", address: "123 Main Street", status: "Open" },
+    appDef,
-      { name: "poppy", address: "456 Side Road", status: "Closed" },
+    user,
-      { name: "Oscar", address: "678 Dodgy Alley", status: "Open" },
+    {},
-    ]
+    []
-    return s
+  )
-  })
+  return initialisePage
-
-  return app
 }

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

@@ -1,207 +1,59 @@
-export const props = {
+export const form = {
-  divWithAFewControls: {
+  _id: "1",
-    _component: "components/div",
+  _component: "@budibase/standard-components/container",
+  type: "main",
   _children: [
     {
-        _component: "components/h1",
+      _component: "@budibase/standard-components/heading",
-        text: "This is an <h1> component",
+      type: "h1",
-      },
-      {
-        _component: "components/text",
-        value: "Label for field",
-      },
-      {
-        _component: "components/input",
-        type: "text",
-      },
-      {
-        _component: "components/button",
       _children: [
         {
-            _component: "components/text",
+          _component: "@budibase/standard-components/text",
-            value: "☢",
+          text: "This is an H1 Heading",
+        },
+      ],
     },
     {
-            _component: "components/text",
+      _component: "@budibase/standard-components/text",
-            value: "Click Me",
+      text: "This just some text",
+      type: "strong",
+    },
+    {
+      _component: "@budibase/standard-components/container",
+      type: "paragraph",
+      _children: [
+        {
+          _component: "@budibase/standard-components/text",
+          formattingTag: "<i>",
+          text: "some iatlics in a paragraph",
+        },
+      ],
+    },
+    {
+      _component: "@budibase/standard-components/heading",
+      type: "h2",
+      _children: [
+        {
+          _component: "@budibase/standard-components/text",
+          text: "This is an H2 Heading",
+        },
+      ],
+    },
+    {
+      _component: "@budibase/standard-components/select",
+      value: "two",
+      _children: [
+        {
+          _component: "@budibase/standard-components/option",
+          text: "number 1",
+          value: "one",
+        },
+        {
+          _component: "@budibase/standard-components/option",
+          text: "number 2",
+          value: "two",
         },
       ],
     },
   ],
-  },
-
-  login: { _component: "components/login" },
-
-  form: {
-    _component: "components/form",
-    formControls: [
-      {
-        control: {
-          _component: "components/textbox",
-        },
-        label: "First Name",
-      },
-      {
-        control: {
-          _component: "components/textbox",
-        },
-        label: "Last Name",
-      },
-    ],
-  },
-
-  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",
-        },
-      },
-    ],
-  },
-
-  table: {
-    _component: "components/table",
-    columns: [
-      {
-        title: {
-          "##bbstate": "NameColumnName",
-          "##bbsource": "store",
-          "##bbstatefallback": "Name",
-        },
-        value: {
-          "##bbstate": "name",
-          "##bbsource": "context",
-        },
-      },
-      {
-        title: "Address",
-        value: {
-          "##bbstate": "address",
-          "##bbsource": "context",
-        },
-      },
-      {
-        title: "Status",
-        value: {
-          "##bbstate": "status",
-          "##bbsource": "context",
-        },
-      },
-    ],
-    data: {
-      "##bbstate": "people",
-    },
-    onRowClick: [
-      {
-        "##eventHandlerType": "Set State",
-        parameters: {
-          path: "NameColumnName",
-          value: {
-            "##bbstate": "name",
-            "##bbsource": "context",
-            "##bbstatefallback": "balls to that",
-          },
-        },
-      },
-    ],
-    tableClass: "table-default",
-    theadClass: "thead-default",
-    tbodyClass: "tbody-default",
-    trClass: "tr-default",
-    thClass: "th-default",
-  },
-
-  hiddenNav: {
-    _component: "components/stackpanel",
-    children: [
-      {
-        control: {
-          _component: "components/button",
-          contentText: "Peep",
-          onClick: [
-            {
-              "##eventHandlerType": "Set State",
-              parameters: {
-                path: "selected",
-                value: "People",
-              },
-            },
-          ],
-        },
-      },
-      {
-        control: {
-          _component: "components/button",
-          contentText: "Ani",
-          onClick: [
-            {
-              "##eventHandlerType": "Set State",
-              parameters: {
-                path: "selected",
-                value: "Animals",
-              },
-            },
-          ],
-        },
-      },
-      {
-        control: {
-          _component: "components/nav",
-          hideNavBar: true,
-          selectedItem: {
-            "##bbstate": "selected",
-            "##bbsource": "store",
-            "##bbstatefallback": "Animals",
-          },
-          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",
-              },
-            },
-          ],
-        },
-      },
-    ],
-  },
 }

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

@@ -0,0 +1,15 @@
+export const rootComponent = window => {
+  return function(opts) {
+    const node = window.document.createElement("DIV")
+    const $set = props => {
+      props._bb.attachChildren(node)
+    }
+    const $destroy = () => {
+      if (opts.target && node) opts.target.removeChild(node)
+    }
+    this.$set = $set
+    this.$set(opts.props)
+    this.$destroy = $destroy
+    opts.target.appendChild(node)
+  }
+}

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

@@ -0,0 +1,3 @@
+import { container, text, heading, input, select, option, button, login, nav, table  } from "../index"
+
+export default { container, text, heading, input, select, option, button, login, nav, table  }

packages/standard-components/src/Text.svelte

@@ -1,8 +1,10 @@
 <script>
   import { buildStyle } from "./buildStyle"
 
-  export let value = ""
+  export let text = ""
-  export let containerClass = ""
+  export let className = ""
+
+  export let formattingTag = ""
 
   export let font = ""
   export let textAlign = ""
@@ -13,6 +15,8 @@
 
   let style = ""
 
+  const isTag = tag => (formattingTag || "").indexOf(tag) > -1
+
   $: {
     style = buildStyle({
       font,
@@ -24,4 +28,30 @@
   }
 </script>
 
-<div class={containerClass} {style}>{value}</div>
+{#if isTag("none")}
+{text}
+{:else if isTag("<b>")}
+<b class={className} {style}>{text}</b>
+{:else if isTag("<strong>")}
+<strong class={className} {style}>{text}</strong>
+{:else if isTag("<i>")}
+<i class={className} {style}>{text}</i>
+{:else if isTag("<em>")}
+<em class={className} {style}>{text}</em>
+{:else if isTag("<mark>")}
+<mark class={className} {style}>{text}</mark>
+{:else if isTag("<small>")}
+<small class={className} {style}>{text}</small>
+{:else if isTag("<del>")}
+<del class={className} {style}>{text}</del>
+{:else if isTag("<ins>")}
+<ins class={className} {style}>{text}</ins>
+{:else if isTag("<sub>")}
+<sub class={className} {style}>{text}</sub>
+{:else if isTag("<sup>")}
+<sup class={className} {style}>{text}</sup>
+{:else}
+{text}
+{/if}
+
+

packages/standard-components/src/button.svelte

@@ -12,7 +12,6 @@
   export let hoverColor
   export let hoverBackground
   export let hoverBorder
-  export let _children
 
   export let _bb
   let theButton
@@ -35,10 +34,7 @@
     return all
   }
 
-  $: {
+  $: if(_bb.props._children.length > 0) theButton && _bb.attachChildren(theButton)
-    if (_bb && theButton && _children && _children.length)
-      _bb.hydrateChildren(_children, theButton)
-  }
 
   $: {
     cssVariables = {
@@ -77,7 +73,7 @@
   disabled={disabled || false}
   on:click={clickHandler}
   style={buttonStyles}>
-  {#if !_children || _children.length === 0}{contentText}{/if}
+  {#if _bb.props_children.length === 0}{contentText}{/if}
 </button>
 
 <style>

packages/standard-components/src/index.js

@@ -1,14 +1,8 @@
-export { default as button } from "./Button.svelte"
+export { default as container } from "./Container.svelte"
-export { default as div } from "./Div.svelte"
-export { default as h1 } from "./H1.svelte"
-export { default as h2 } from "./H2.svelte"
-export { default as h3 } from "./H3.svelte"
-export { default as h4 } from "./H4.svelte"
-export { default as h5 } from "./H5.svelte"
-export { default as h6 } from "./H6.svelte"
-export { default as input } from "./Input.svelte"
-export { default as login } from "./Login.svelte"
-export { default as nav } from "./Nav.svelte"
-export { default as select } from "./Select.svelte"
-export { default as table } from "./Table.svelte"
 export { default as text } from "./Text.svelte"
+export { default as heading } from "./Heading.svelte"
+export { default as input } from "./Input.svelte"
+export { default as select } from "./Select.svelte"
+export { default as option } from "./Option.svelte"
+export { default as button } from "./Button.svelte"
+export { default as login } from "./Login.svelte"