MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

basic cru app possible

This commit is contained in:
Michael Shanks 2019-10-19 07:24:20 +01:00
parent 92dcf4b2b8
commit 540fb4c3d6
50 changed files with 963 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bootstrap-components/components.json
View File

@ -57,7 +57,8 @@
"orientation":{"type":"options", "options": ["horizontal", "vertical"]}, "orientation":{"type":"options", "options": ["horizontal", "vertical"]},
"alignment":{"type":"options", "options": ["start", "center", "end"]}, "alignment":{"type":"options", "options": ["start", "center", "end"]},
"fill":"bool", "fill":"bool",
"hideNavBar":"bool" "hideNavBar":"bool",
"className": "string"
}, },
"tags": ["nav", "navigation", "sidebar"] "tags": ["nav", "navigation", "sidebar"]

145
packages/bootstrap-components/dist/generators.js vendored
View File

File diff suppressed because one or more lines are too long

4
packages/bootstrap-components/src/Form.svelte
View File

@ -22,12 +22,12 @@ $ : {
for(let el in htmlElements) { for(let el in htmlElements) {
if(formControls[el].control.controlPosition === "Before Label") { if(formControls[el].control.controlPosition === "Before Label") {
_bb.insertComponent( _bb.insertComponent(
formControls[el].control, _bb.props.formControls[el].control,
htmlElements[el], htmlElements[el],
labelElements[el]); labelElements[el]);
} else { } else {
_bb.appendComponent( _bb.appendComponent(
formControls[el].control, _bb.props.formControls[el].control,
htmlElements[el]); htmlElements[el]);
} }
} }

12
packages/bootstrap-components/src/Nav.svelte
View File

@ -7,6 +7,7 @@ export let orientation="horizontal"; // horizontal, verical
export let alignment="start"; // start, center, end export let alignment="start"; // start, center, end
export let pills=false; export let pills=false;
export let fill=false; export let fill=false;
export let className="";
export let _bb; export let _bb;
let selectedIndex = -1; let selectedIndex = -1;
@ -45,7 +46,7 @@ $: {
navClasses = _navClasses; navClasses = _navClasses;
if(items ) { if(items && componentElement) {
const currentSelectedItem = getSelectedItemByIndex(selectedIndex); const currentSelectedItem = getSelectedItemByIndex(selectedIndex);
@ -79,14 +80,14 @@ const SelectItem = (index) => {
if(index >= 0) if(index >= 0)
currentComponent = _bb.hydrateComponent( currentComponent = _bb.hydrateComponent(
items[index].component, componentElement); _bb.props.items[index].component, componentElement);
} }
const onSelectItemClicked = index => () => { const onSelectItemClicked = index => () => {
if(_bb.bindings["selectedItem"]) { if(_bb.props.selectedItem) {
// binding - call state, which should SelectItem(..) // binding - call state, which should SelectItem(..)
const selectedItemBinding = _bb.bindings["selectedItem"]; const selectedItemBinding = _bb.props.selectedItem;
_bb.setStateFromBinding( _bb.setStateFromBinding(
selectedItemBinding, getSelectedItemByIndex(index)) selectedItemBinding, getSelectedItemByIndex(index))
} else { } else {
@ -98,7 +99,7 @@ const onSelectItemClicked = index => () => {
</script> </script>
<div class="root"> <div class="root {className}">
{#if !hideNavBar} {#if !hideNavBar}
<ul class="nav {navClasses}"> <ul class="nav {navClasses}">
{#each items as navItem, index} {#each items as navItem, index}
@ -127,6 +128,5 @@ const onSelectItemClicked = index => () => {
width:100%; width:100%;
} }
</style> </style>

3
packages/bootstrap-components/src/generators/appGenerator.js
View File

@ -15,7 +15,8 @@ export const app = ({records, indexes, helpers}) => [
"##bbstate":"selectedNav", "##bbstate":"selectedNav",
"##bbstatefallback":`${records[0].name}`, "##bbstatefallback":`${records[0].name}`,
"##bbsource": "store" "##bbsource": "store"
} },
className: "p-3"
} }
}, },
{ {

2
packages/bootstrap-components/src/generators/buttonGenerators.js
View File

@ -12,7 +12,7 @@ export const buttons = () => [
description: "Bootstrap default button", description: "Bootstrap default button",
inherits: "@budibase/standard-components/button", inherits: "@budibase/standard-components/button",
props: { props: {
className: "btn btn-light" className: "btn btn-secondary"
} }
} }
] ]

17
packages/bootstrap-components/src/generators/indexTablesGenerator.js
View File

@ -18,23 +18,12 @@ export const indexTableProps = (index, helpers) => ({
.map(column), .map(column),
onRowClick: [ onRowClick: [
{ {
"##eventHandlerType": "Load Record",
parameters: {
recordKey: {
"##bbstate": "key",
"##bbsource": "context"
},
statePath: {
"##bbstate": "type",
"##bbsource": "context"
}
},
"##eventHandlerType": "Set State", "##eventHandlerType": "Set State",
parameters: { parameters: {
path: "currentView", path: `selectedrow_${index.name}`,
value: { value: {
"##bbstate": "type", "##bbstate": "key",
"##bbsource": "context" "##bbsource": "event"
} }
}, },
} }

121
packages/bootstrap-components/src/generators/recordHomePageGenerator.js
View File

@ -45,14 +45,8 @@ const component = ({record, index}) => ({
inherits: "@budibase/standard-components/div", inherits: "@budibase/standard-components/div",
name: homepageComponentName(record), name: homepageComponentName(record),
props: { props: {
className: "p-3", className: "d-flex flex-column h-100",
children: [ children: [
{
component: {
_component: "@budibase/standard-components/h2",
text: record.collectionName
}
},
{ {
component: { component: {
_component: `${record.name}/homepage buttons`, _component: `${record.name}/homepage buttons`,
@ -61,7 +55,8 @@ const component = ({record, index}) => ({
{ {
component: { component: {
_component: getIndexTableName(index) _component: getIndexTableName(index)
} },
className: "flex-gow-1 overflow-auto"
} }
], ],
onLoad: [ onLoad: [
@ -88,26 +83,49 @@ const homePageButtons = ({index, record}) => ({
inherits: "@budibase/standard-components/div", inherits: "@budibase/standard-components/div",
name: `${record.name}/homepage buttons`, name: `${record.name}/homepage buttons`,
props: { props: {
className: "btn-group", className: "btn-toolbar mt-4 mb-2",
children: [ children: [
{ {
component: { component: {
_component: "common/Default Button", _component: "@budibase/standard-components/div",
contentText: `Create ${record.name}`, className: "btn-group mr-3",
onClick: [ children: [
{ {
"##eventHandlerType": "Get New Record", component: {
parameters: { _component: "common/Default Button",
statePath: record.name, contentText: `Create ${record.name}`,
collectionKey: `/${record.collectionName}`, onClick: [
childRecordType: record.name {
"##eventHandlerType": "Get New Record",
parameters: {
statePath: record.name,
collectionKey: `/${record.collectionName}`,
childRecordType: record.name
}
},
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: "true"
}
}
]
} }
}, },
{ {
"##eventHandlerType": "Set State", component: {
parameters: { _component: "common/Default Button",
path: `isEditing${record.name}`, contentText: `Refresh`,
value: "true" onClick: [
{
"##eventHandlerType": "List Records",
parameters: {
statePath: index.nodeKey(),
indexKey: index.nodeKey()
}
}
]
} }
} }
] ]
@ -115,17 +133,56 @@ const homePageButtons = ({index, record}) => ({
}, },
{ {
component: { component: {
_component: "common/Default Button", _component: "@budibase/standard-components/if",
contentText: `Refresh`, condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`,
onClick: [ thenComponent: {
{ _component: "@budibase/standard-components/div",
"##eventHandlerType": "List Records", className: "btn-group",
parameters: { children: [
statePath: index.nodeKey(), {
indexKey: index.nodeKey() component: {
_component: "common/Default Button",
contentText: `Edit ${record.name}`,
onClick: [
{
"##eventHandlerType": "Load Record",
parameters: {
statePath: record.name,
recordKey: {
"##bbstate" : `selectedrow_${index.name}`,
"##source": "store"
}
}
},
{
"##eventHandlerType": "Set State",
parameters: {
path: `isEditing${record.name}`,
value: "true"
}
}
]
}
},
{
component: {
_component: "common/Default Button",
contentText: `Delete ${record.name}`,
onClick: [
{
"##eventHandlerType": "Delete Record",
parameters: {
recordKey: {
"##bbstate" : `selectedrow_${index.name}`,
"##source": "store"
}
}
}
]
}
} }
} ]
] }
} }
} }
] ]

2
packages/client/src/api/loadRecord.js
View File

@ -13,7 +13,7 @@ import {trimSlash} from "../common/trimSlash";
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))

14
packages/client/src/createApp.js
View File

@ -21,19 +21,14 @@ export const createApp = (componentLibraries, appDefinition, user) => {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext, props) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -90,7 +85,7 @@ export const createApp = (componentLibraries, appDefinition, user) => {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
} }
const bb = (bindings, context, props) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -104,7 +99,6 @@ export const createApp = (componentLibraries, appDefinition, user) => {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings,
context, context,
props props
}); });

2
packages/client/src/state/setState.js
View File

@ -35,4 +35,4 @@ export const setState = (store, path, value) => {
}; };
export const setStateFromBinding = (store, binding, value) => export const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);

13
packages/client/src/state/stateBinding.js
View File

@ -55,12 +55,13 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback, context ,
source binding,
); fallback,
source);
} else if(isEventType(val)) { } else if(isEventType(val)) {

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

@ -19002,7 +19002,7 @@ var app = (function (exports) {
}; };
const setStateFromBinding = (store, binding, value) => const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);
const getState = (s, path, fallback) => { const getState = (s, path, fallback) => {
@ -19081,7 +19081,7 @@ var app = (function (exports) {
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -19368,10 +19368,12 @@ var app = (function (exports) {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback); context ,
binding,
fallback);
} else if(isEventType(val)) { } else if(isEventType(val)) {
@ -20502,19 +20504,14 @@ var app = (function (exports) {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -20571,7 +20568,7 @@ var app = (function (exports) {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
}; };
const bb = (bindings, context) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -20585,56 +20582,14 @@ var app = (function (exports) {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings, context,
context, props
}); });
return bb(); return bb();
}; };
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
const bindings = {};
if(boundProps && boundProps.length > 0) {
for(let p of boundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(contextBoundProps && contextBoundProps.length > 0) {
for(let p of contextBoundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(boundArrays && boundArrays.length > 0) {
for(let a of boundArrays) {
const arrayOfBindings = [];
for(let b of a.arrayOfBindings) {
arrayOfBindings.push(
buildBindings(
b.boundProps,
b.boundArrays,
b.contextBoundProps)
);
}
bindings[a.propName] = arrayOfBindings;
}
}
return bindings;
};
const splitName = fullname => { const splitName = fullname => {
const componentName = $(fullname, [ const componentName = $(fullname, [

2
packages/server/appPackages/_master/public/main/budibase-client.js.map
View File

File diff suppressed because one or more lines are too long

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

@ -19002,7 +19002,7 @@ var app = (function (exports) {
}; };
const setStateFromBinding = (store, binding, value) => const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);
const getState = (s, path, fallback) => { const getState = (s, path, fallback) => {
@ -19081,7 +19081,7 @@ var app = (function (exports) {
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -19368,10 +19368,12 @@ var app = (function (exports) {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback); context ,
binding,
fallback);
} else if(isEventType(val)) { } else if(isEventType(val)) {
@ -20502,19 +20504,14 @@ var app = (function (exports) {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -20571,7 +20568,7 @@ var app = (function (exports) {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
}; };
const bb = (bindings, context) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -20585,56 +20582,14 @@ var app = (function (exports) {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings, context,
context, props
}); });
return bb(); return bb();
}; };
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
const bindings = {};
if(boundProps && boundProps.length > 0) {
for(let p of boundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(contextBoundProps && contextBoundProps.length > 0) {
for(let p of contextBoundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(boundArrays && boundArrays.length > 0) {
for(let a of boundArrays) {
const arrayOfBindings = [];
for(let b of a.arrayOfBindings) {
arrayOfBindings.push(
buildBindings(
b.boundProps,
b.boundArrays,
b.contextBoundProps)
);
}
bindings[a.propName] = arrayOfBindings;
}
}
return bindings;
};
const splitName = fullname => { const splitName = fullname => {
const componentName = $(fullname, [ const componentName = $(fullname, [

2
packages/server/appPackages/_master/public/unauthenticated/budibase-client.js.map
View File

File diff suppressed because one or more lines are too long

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

@ -19002,7 +19002,7 @@ var app = (function (exports) {
}; };
const setStateFromBinding = (store, binding, value) => const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);
const getState = (s, path, fallback) => { const getState = (s, path, fallback) => {
@ -19081,7 +19081,7 @@ var app = (function (exports) {
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -19368,10 +19368,12 @@ var app = (function (exports) {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback); context ,
binding,
fallback);
} else if(isEventType(val)) { } else if(isEventType(val)) {
@ -20502,19 +20504,14 @@ var app = (function (exports) {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -20571,7 +20568,7 @@ var app = (function (exports) {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
}; };
const bb = (bindings, context) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -20585,56 +20582,14 @@ var app = (function (exports) {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings, context,
context, props
}); });
return bb(); return bb();
}; };
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
const bindings = {};
if(boundProps && boundProps.length > 0) {
for(let p of boundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(contextBoundProps && contextBoundProps.length > 0) {
for(let p of contextBoundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(boundArrays && boundArrays.length > 0) {
for(let a of boundArrays) {
const arrayOfBindings = [];
for(let b of a.arrayOfBindings) {
arrayOfBindings.push(
buildBindings(
b.boundProps,
b.boundArrays,
b.contextBoundProps)
);
}
bindings[a.propName] = arrayOfBindings;
}
}
return bindings;
};
const splitName = fullname => { const splitName = fullname => {
const componentName = $(fullname, [ const componentName = $(fullname, [

2
packages/server/appPackages/testApp/public/main/budibase-client.js.map
View File

File diff suppressed because one or more lines are too long

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

@ -19002,7 +19002,7 @@ var app = (function (exports) {
}; };
const setStateFromBinding = (store, binding, value) => const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);
const getState = (s, path, fallback) => { const getState = (s, path, fallback) => {
@ -19081,7 +19081,7 @@ var app = (function (exports) {
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -19368,10 +19368,12 @@ var app = (function (exports) {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback); context ,
binding,
fallback);
} else if(isEventType(val)) { } else if(isEventType(val)) {
@ -20502,19 +20504,14 @@ var app = (function (exports) {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -20571,7 +20568,7 @@ var app = (function (exports) {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
}; };
const bb = (bindings, context) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -20585,56 +20582,14 @@ var app = (function (exports) {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings, context,
context, props
}); });
return bb(); return bb();
}; };
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
const bindings = {};
if(boundProps && boundProps.length > 0) {
for(let p of boundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(contextBoundProps && contextBoundProps.length > 0) {
for(let p of contextBoundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(boundArrays && boundArrays.length > 0) {
for(let a of boundArrays) {
const arrayOfBindings = [];
for(let b of a.arrayOfBindings) {
arrayOfBindings.push(
buildBindings(
b.boundProps,
b.boundArrays,
b.contextBoundProps)
);
}
bindings[a.propName] = arrayOfBindings;
}
}
return bindings;
};
const splitName = fullname => { const splitName = fullname => {
const componentName = $(fullname, [ const componentName = $(fullname, [

2
packages/server/appPackages/testApp/public/unauthenticated/budibase-client.js.map
View File

File diff suppressed because one or more lines are too long

517
packages/server/appPackages/testApp2/appDefinition.json
View File

@ -134,7 +134,8 @@
"_component": "@budibase/standard-components/h3", "_component": "@budibase/standard-components/h3",
"text": "Edit customer", "text": "Edit customer",
"className": "" "className": ""
} },
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
@ -185,7 +186,8 @@
} }
} }
] ]
} },
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
@ -230,7 +232,8 @@
"hoverColor": "", "hoverColor": "",
"hoverBackground": "", "hoverBackground": "",
"hoverBorder": "" "hoverBorder": ""
} },
"className": ""
} }
], ],
"className": "btn-group", "className": "btn-group",
@ -256,7 +259,7 @@
"contentComponent": { "contentComponent": {
"_component": "" "_component": ""
}, },
"className": "btn btn-light", "className": "btn btn-secondary",
"disabled": false, "disabled": false,
"onClick": [ "onClick": [
{ {
@ -274,7 +277,8 @@
"hoverColor": "", "hoverColor": "",
"hoverBackground": "", "hoverBackground": "",
"hoverBorder": "" "hoverBorder": ""
} },
"className": ""
} }
], ],
"className": "btn-group", "className": "btn-group",
@ -299,7 +303,8 @@
"_component": "" "_component": ""
}, },
"onLoad": [] "onLoad": []
} },
"className": ""
} }
], ],
"className": "p-1", "className": "p-1",
@ -314,14 +319,6 @@
"elseComponent": { "elseComponent": {
"_component": "@budibase/standard-components/div", "_component": "@budibase/standard-components/div",
"children": [ "children": [
{
"_component": "children#array_element#",
"component": {
"_component": "@budibase/standard-components/h2",
"text": "customers",
"className": ""
}
},
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
"component": { "component": {
@ -330,69 +327,182 @@
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
"component": { "component": {
"_component": "@budibase/standard-components/button", "_component": "@budibase/standard-components/div",
"contentText": "Create customer", "children": [
"contentComponent": {
"_component": ""
},
"className": "btn btn-light",
"disabled": false,
"onClick": [
{ {
"##eventHandlerType": "Get New Record", "_component": "children#array_element#",
"parameters": { "component": {
"statePath": "customer", "_component": "@budibase/standard-components/button",
"collectionKey": "/customers", "contentText": "Create customer",
"childRecordType": "customer" "contentComponent": {
} "_component": ""
},
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "Get New Record",
"parameters": {
"statePath": "customer",
"collectionKey": "/customers",
"childRecordType": "customer"
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingcustomer",
"value": "true"
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
}, },
{ {
"##eventHandlerType": "Set State", "_component": "children#array_element#",
"parameters": { "component": {
"path": "isEditingcustomer", "_component": "@budibase/standard-components/button",
"value": "true" "contentText": "Refresh",
} "contentComponent": {
"_component": ""
},
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "List Records",
"parameters": {
"statePath": "/all_customers",
"indexKey": "/all_customers"
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
} }
], ],
"background": "", "className": "btn-group mr-3",
"color": "", "data": {
"border": "", "##bbstate": ""
"padding": "", },
"hoverColor": "", "dataItemComponent": {
"hoverBackground": "", "_component": ""
"hoverBorder": "" },
} "onLoad": []
},
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
"component": { "component": {
"_component": "@budibase/standard-components/button", "_component": "@budibase/standard-components/if",
"contentText": "Refresh", "condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
"contentComponent": { "thenComponent": {
"_component": "" "_component": "@budibase/standard-components/div",
}, "children": [
"className": "btn btn-light", {
"disabled": false, "_component": "children#array_element#",
"onClick": [ "component": {
{ "_component": "@budibase/standard-components/button",
"##eventHandlerType": "List Records", "contentText": "Edit customer",
"parameters": { "contentComponent": {
"statePath": "/all_customers", "_component": ""
"indexKey": "/all_customers" },
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "Load Record",
"parameters": {
"statePath": "customer",
"recordKey": {
"##bbstate": "selectedrow_all_customers",
"##source": "store"
}
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingcustomer",
"value": "true"
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
},
{
"_component": "children#array_element#",
"component": {
"_component": "@budibase/standard-components/button",
"contentText": "Delete customer",
"contentComponent": {
"_component": ""
},
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "Delete Record",
"parameters": {
"recordKey": {
"##bbstate": "selectedrow_all_customers",
"##source": "store"
}
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
} }
} ],
], "className": "btn-group",
"background": "", "data": {
"color": "", "##bbstate": ""
"border": "", },
"padding": "", "dataItemComponent": {
"hoverColor": "", "_component": ""
"hoverBackground": "", },
"hoverBorder": "" "onLoad": []
} },
"elseComponent": {
"_component": ""
}
},
"className": ""
} }
], ],
"className": "btn-group", "className": "btn-toolbar mt-4 mb-2",
"data": { "data": {
"##bbstate": "" "##bbstate": ""
}, },
@ -400,7 +510,8 @@
"_component": "" "_component": ""
}, },
"onLoad": [] "onLoad": []
} },
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
@ -432,10 +543,10 @@
{ {
"##eventHandlerType": "Set State", "##eventHandlerType": "Set State",
"parameters": { "parameters": {
"path": "currentView", "path": "selectedrow_all_customers",
"value": { "value": {
"##bbstate": "type", "##bbstate": "key",
"##bbsource": "context" "##bbsource": "event"
} }
} }
} }
@ -445,10 +556,11 @@
"tbodyClass": "tbody-default", "tbodyClass": "tbody-default",
"trClass": "tr-default", "trClass": "tr-default",
"thClass": "th-default" "thClass": "th-default"
} },
"className": "flex-gow-1 overflow-auto"
} }
], ],
"className": "p-3", "className": "d-flex flex-column h-100",
"data": { "data": {
"##bbstate": "" "##bbstate": ""
}, },
@ -489,7 +601,8 @@
"_component": "@budibase/standard-components/h3", "_component": "@budibase/standard-components/h3",
"text": "Edit Contact", "text": "Edit Contact",
"className": "" "className": ""
} },
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
@ -524,7 +637,8 @@
} }
} }
] ]
} },
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
@ -569,7 +683,8 @@
"hoverColor": "", "hoverColor": "",
"hoverBackground": "", "hoverBackground": "",
"hoverBorder": "" "hoverBorder": ""
} },
"className": ""
} }
], ],
"className": "btn-group", "className": "btn-group",
@ -595,7 +710,7 @@
"contentComponent": { "contentComponent": {
"_component": "" "_component": ""
}, },
"className": "btn btn-light", "className": "btn btn-secondary",
"disabled": false, "disabled": false,
"onClick": [ "onClick": [
{ {
@ -613,7 +728,8 @@
"hoverColor": "", "hoverColor": "",
"hoverBackground": "", "hoverBackground": "",
"hoverBorder": "" "hoverBorder": ""
} },
"className": ""
} }
], ],
"className": "btn-group", "className": "btn-group",
@ -638,7 +754,8 @@
"_component": "" "_component": ""
}, },
"onLoad": [] "onLoad": []
} },
"className": ""
} }
], ],
"className": "p-1", "className": "p-1",
@ -653,14 +770,6 @@
"elseComponent": { "elseComponent": {
"_component": "@budibase/standard-components/div", "_component": "@budibase/standard-components/div",
"children": [ "children": [
{
"_component": "children#array_element#",
"component": {
"_component": "@budibase/standard-components/h2",
"text": "contacts",
"className": ""
}
},
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
"component": { "component": {
@ -669,69 +778,182 @@
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
"component": { "component": {
"_component": "@budibase/standard-components/button", "_component": "@budibase/standard-components/div",
"contentText": "Create Contact", "children": [
"contentComponent": {
"_component": ""
},
"className": "btn btn-light",
"disabled": false,
"onClick": [
{ {
"##eventHandlerType": "Get New Record", "_component": "children#array_element#",
"parameters": { "component": {
"statePath": "Contact", "_component": "@budibase/standard-components/button",
"collectionKey": "/contacts", "contentText": "Create Contact",
"childRecordType": "Contact" "contentComponent": {
} "_component": ""
},
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "Get New Record",
"parameters": {
"statePath": "Contact",
"collectionKey": "/contacts",
"childRecordType": "Contact"
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingContact",
"value": "true"
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
}, },
{ {
"##eventHandlerType": "Set State", "_component": "children#array_element#",
"parameters": { "component": {
"path": "isEditingContact", "_component": "@budibase/standard-components/button",
"value": "true" "contentText": "Refresh",
} "contentComponent": {
"_component": ""
},
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "List Records",
"parameters": {
"statePath": "/all_contacts",
"indexKey": "/all_contacts"
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
} }
], ],
"background": "", "className": "btn-group mr-3",
"color": "", "data": {
"border": "", "##bbstate": ""
"padding": "", },
"hoverColor": "", "dataItemComponent": {
"hoverBackground": "", "_component": ""
"hoverBorder": "" },
} "onLoad": []
},
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
"component": { "component": {
"_component": "@budibase/standard-components/button", "_component": "@budibase/standard-components/if",
"contentText": "Refresh", "condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
"contentComponent": { "thenComponent": {
"_component": "" "_component": "@budibase/standard-components/div",
}, "children": [
"className": "btn btn-light", {
"disabled": false, "_component": "children#array_element#",
"onClick": [ "component": {
{ "_component": "@budibase/standard-components/button",
"##eventHandlerType": "List Records", "contentText": "Edit Contact",
"parameters": { "contentComponent": {
"statePath": "/all_contacts", "_component": ""
"indexKey": "/all_contacts" },
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "Load Record",
"parameters": {
"statePath": "Contact",
"recordKey": {
"##bbstate": "selectedrow_all_contacts",
"##source": "store"
}
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingContact",
"value": "true"
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
},
{
"_component": "children#array_element#",
"component": {
"_component": "@budibase/standard-components/button",
"contentText": "Delete Contact",
"contentComponent": {
"_component": ""
},
"className": "btn btn-secondary",
"disabled": false,
"onClick": [
{
"##eventHandlerType": "Delete Record",
"parameters": {
"recordKey": {
"##bbstate": "selectedrow_all_contacts",
"##source": "store"
}
}
}
],
"background": "",
"color": "",
"border": "",
"padding": "",
"hoverColor": "",
"hoverBackground": "",
"hoverBorder": ""
},
"className": ""
} }
} ],
], "className": "btn-group",
"background": "", "data": {
"color": "", "##bbstate": ""
"border": "", },
"padding": "", "dataItemComponent": {
"hoverColor": "", "_component": ""
"hoverBackground": "", },
"hoverBorder": "" "onLoad": []
} },
"elseComponent": {
"_component": ""
}
},
"className": ""
} }
], ],
"className": "btn-group", "className": "btn-toolbar mt-4 mb-2",
"data": { "data": {
"##bbstate": "" "##bbstate": ""
}, },
@ -739,7 +961,8 @@
"_component": "" "_component": ""
}, },
"onLoad": [] "onLoad": []
} },
"className": ""
}, },
{ {
"_component": "children#array_element#", "_component": "children#array_element#",
@ -771,10 +994,10 @@
{ {
"##eventHandlerType": "Set State", "##eventHandlerType": "Set State",
"parameters": { "parameters": {
"path": "currentView", "path": "selectedrow_all_contacts",
"value": { "value": {
"##bbstate": "type", "##bbstate": "key",
"##bbsource": "context" "##bbsource": "event"
} }
} }
} }
@ -784,10 +1007,11 @@
"tbodyClass": "tbody-default", "tbodyClass": "tbody-default",
"trClass": "tr-default", "trClass": "tr-default",
"thClass": "th-default" "thClass": "th-default"
} },
"className": "flex-gow-1 overflow-auto"
} }
], ],
"className": "p-3", "className": "d-flex flex-column h-100",
"data": { "data": {
"##bbstate": "" "##bbstate": ""
}, },
@ -816,14 +1040,15 @@
], ],
"selectedItem": { "selectedItem": {
"##bbstate": "selectedNav", "##bbstate": "selectedNav",
"##bbstatefallback": "customer", "##bbstatefallback": "customers",
"##bbsource": "store" "##bbsource": "store"
}, },
"pills": true, "pills": false,
"orientation": "horizontal", "orientation": "horizontal",
"alignment": "start", "alignment": "end",
"fill": false, "fill": false,
"hideNavBar": false "hideNavBar": false,
"className": "p-3"
}, },
"unauthenticated": { "unauthenticated": {
"_component": "@budibase/standard-components/login", "_component": "@budibase/standard-components/login",

14
packages/server/appPackages/testApp2/components/Application Root.json
View File

@ -17,13 +17,17 @@
} }
], ],
"orientation": "horizontal", "orientation": "horizontal",
"alignment": "start", "alignment": "end",
"fill": false, "fill": false,
"pills": true, "pills": false,
"selectedItem": { "selectedItem": {
"##bbstate": "selectedNav", "##bbstate": "selectedNav",
"##bbstatefallback": "customer", "##bbstatefallback": "customers",
"##bbsource": "store" "##bbsource": "store"
} },
} "className": "p-3"
},
"tags": [
""
]
} }

11
packages/server/appPackages/testApp2/components/Contact/Contact homepage.json
View File

@ -2,14 +2,8 @@
"inherits": "@budibase/standard-components/div", "inherits": "@budibase/standard-components/div",
"name": "Contact/Contact homepage", "name": "Contact/Contact homepage",
"props": { "props": {
"className": "p-3", "className": "d-flex flex-column h-100",
"children": [ "children": [
{
"component": {
"_component": "@budibase/standard-components/h2",
"text": "contacts"
}
},
{ {
"component": { "component": {
"_component": "Contact/homepage buttons" "_component": "Contact/homepage buttons"
@ -18,7 +12,8 @@
{ {
"component": { "component": {
"_component": "all_contacts Table" "_component": "all_contacts Table"
} },
"className": "flex-gow-1 overflow-auto"
} }
], ],
"onLoad": [ "onLoad": [

108
packages/server/appPackages/testApp2/components/Contact/homepage buttons.json
View File

@ -2,26 +2,49 @@
"inherits": "@budibase/standard-components/div", "inherits": "@budibase/standard-components/div",
"name": "Contact/homepage buttons", "name": "Contact/homepage buttons",
"props": { "props": {
"className": "btn-group", "className": "btn-toolbar mt-4 mb-2",
"children": [ "children": [
{ {
"component": { "component": {
"_component": "common/Default Button", "_component": "@budibase/standard-components/div",
"contentText": "Create Contact", "className": "btn-group mr-3",
"onClick": [ "children": [
{ {
"##eventHandlerType": "Get New Record", "component": {
"parameters": { "_component": "common/Default Button",
"statePath": "Contact", "contentText": "Create Contact",
"collectionKey": "/contacts", "onClick": [
"childRecordType": "Contact" {
"##eventHandlerType": "Get New Record",
"parameters": {
"statePath": "Contact",
"collectionKey": "/contacts",
"childRecordType": "Contact"
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingContact",
"value": "true"
}
}
]
} }
}, },
{ {
"##eventHandlerType": "Set State", "component": {
"parameters": { "_component": "common/Default Button",
"path": "isEditingContact", "contentText": "Refresh",
"value": "true" "onClick": [
{
"##eventHandlerType": "List Records",
"parameters": {
"statePath": "/all_contacts",
"indexKey": "/all_contacts"
}
}
]
} }
} }
] ]
@ -29,17 +52,56 @@
}, },
{ {
"component": { "component": {
"_component": "common/Default Button", "_component": "@budibase/standard-components/if",
"contentText": "Refresh", "condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
"onClick": [ "thenComponent": {
{ "_component": "@budibase/standard-components/div",
"##eventHandlerType": "List Records", "className": "btn-group",
"parameters": { "children": [
"statePath": "/all_contacts", {
"indexKey": "/all_contacts" "component": {
"_component": "common/Default Button",
"contentText": "Edit Contact",
"onClick": [
{
"##eventHandlerType": "Load Record",
"parameters": {
"statePath": "Contact",
"recordKey": {
"##bbstate": "selectedrow_all_contacts",
"##source": "store"
}
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingContact",
"value": "true"
}
}
]
}
},
{
"component": {
"_component": "common/Default Button",
"contentText": "Delete Contact",
"onClick": [
{
"##eventHandlerType": "Delete Record",
"parameters": {
"recordKey": {
"##bbstate": "selectedrow_all_contacts",
"##source": "store"
}
}
}
]
}
} }
} ]
] }
} }
} }
] ]

6
packages/server/appPackages/testApp2/components/all_contacts Table.json
View File

@ -28,10 +28,10 @@
{ {
"##eventHandlerType": "Set State", "##eventHandlerType": "Set State",
"parameters": { "parameters": {
"path": "currentView", "path": "selectedrow_all_contacts",
"value": { "value": {
"##bbstate": "type", "##bbstate": "key",
"##bbsource": "context" "##bbsource": "event"
} }
} }
} }

6
packages/server/appPackages/testApp2/components/all_customers Table.json
View File

@ -28,10 +28,10 @@
{ {
"##eventHandlerType": "Set State", "##eventHandlerType": "Set State",
"parameters": { "parameters": {
"path": "currentView", "path": "selectedrow_all_customers",
"value": { "value": {
"##bbstate": "type", "##bbstate": "key",
"##bbsource": "context" "##bbsource": "event"
} }
} }
} }

2
packages/server/appPackages/testApp2/components/common/Default Button.json
View File

@ -3,6 +3,6 @@
"description": "Bootstrap default button", "description": "Bootstrap default button",
"inherits": "@budibase/standard-components/button", "inherits": "@budibase/standard-components/button",
"props": { "props": {
"className": "btn btn-light" "className": "btn btn-secondary"
} }
} }

11
packages/server/appPackages/testApp2/components/customer/customer homepage.json
View File

@ -2,14 +2,8 @@
"inherits": "@budibase/standard-components/div", "inherits": "@budibase/standard-components/div",
"name": "customer/customer homepage", "name": "customer/customer homepage",
"props": { "props": {
"className": "p-3", "className": "d-flex flex-column h-100",
"children": [ "children": [
{
"component": {
"_component": "@budibase/standard-components/h2",
"text": "customers"
}
},
{ {
"component": { "component": {
"_component": "customer/homepage buttons" "_component": "customer/homepage buttons"
@ -18,7 +12,8 @@
{ {
"component": { "component": {
"_component": "all_customers Table" "_component": "all_customers Table"
} },
"className": "flex-gow-1 overflow-auto"
} }
], ],
"onLoad": [ "onLoad": [

108
packages/server/appPackages/testApp2/components/customer/homepage buttons.json
View File

@ -2,26 +2,49 @@
"inherits": "@budibase/standard-components/div", "inherits": "@budibase/standard-components/div",
"name": "customer/homepage buttons", "name": "customer/homepage buttons",
"props": { "props": {
"className": "btn-group", "className": "btn-toolbar mt-4 mb-2",
"children": [ "children": [
{ {
"component": { "component": {
"_component": "common/Default Button", "_component": "@budibase/standard-components/div",
"contentText": "Create customer", "className": "btn-group mr-3",
"onClick": [ "children": [
{ {
"##eventHandlerType": "Get New Record", "component": {
"parameters": { "_component": "common/Default Button",
"statePath": "customer", "contentText": "Create customer",
"collectionKey": "/customers", "onClick": [
"childRecordType": "customer" {
"##eventHandlerType": "Get New Record",
"parameters": {
"statePath": "customer",
"collectionKey": "/customers",
"childRecordType": "customer"
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingcustomer",
"value": "true"
}
}
]
} }
}, },
{ {
"##eventHandlerType": "Set State", "component": {
"parameters": { "_component": "common/Default Button",
"path": "isEditingcustomer", "contentText": "Refresh",
"value": "true" "onClick": [
{
"##eventHandlerType": "List Records",
"parameters": {
"statePath": "/all_customers",
"indexKey": "/all_customers"
}
}
]
} }
} }
] ]
@ -29,17 +52,56 @@
}, },
{ {
"component": { "component": {
"_component": "common/Default Button", "_component": "@budibase/standard-components/if",
"contentText": "Refresh", "condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
"onClick": [ "thenComponent": {
{ "_component": "@budibase/standard-components/div",
"##eventHandlerType": "List Records", "className": "btn-group",
"parameters": { "children": [
"statePath": "/all_customers", {
"indexKey": "/all_customers" "component": {
"_component": "common/Default Button",
"contentText": "Edit customer",
"onClick": [
{
"##eventHandlerType": "Load Record",
"parameters": {
"statePath": "customer",
"recordKey": {
"##bbstate": "selectedrow_all_customers",
"##source": "store"
}
}
},
{
"##eventHandlerType": "Set State",
"parameters": {
"path": "isEditingcustomer",
"value": "true"
}
}
]
}
},
{
"component": {
"_component": "common/Default Button",
"contentText": "Delete customer",
"onClick": [
{
"##eventHandlerType": "Delete Record",
"parameters": {
"recordKey": {
"##bbstate": "selectedrow_all_customers",
"##source": "store"
}
}
}
]
}
} }
} ]
] }
} }
} }
] ]

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

@ -19002,7 +19002,7 @@ var app = (function (exports) {
}; };
const setStateFromBinding = (store, binding, value) => const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);
const getState = (s, path, fallback) => { const getState = (s, path, fallback) => {
@ -19081,7 +19081,7 @@ var app = (function (exports) {
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -19368,10 +19368,12 @@ var app = (function (exports) {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback); context ,
binding,
fallback);
} else if(isEventType(val)) { } else if(isEventType(val)) {
@ -20502,19 +20504,14 @@ var app = (function (exports) {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -20571,7 +20568,7 @@ var app = (function (exports) {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
}; };
const bb = (bindings, context) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -20585,56 +20582,14 @@ var app = (function (exports) {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings, context,
context, props
}); });
return bb(); return bb();
}; };
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
const bindings = {};
if(boundProps && boundProps.length > 0) {
for(let p of boundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(contextBoundProps && contextBoundProps.length > 0) {
for(let p of contextBoundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(boundArrays && boundArrays.length > 0) {
for(let a of boundArrays) {
const arrayOfBindings = [];
for(let b of a.arrayOfBindings) {
arrayOfBindings.push(
buildBindings(
b.boundProps,
b.boundArrays,
b.contextBoundProps)
);
}
bindings[a.propName] = arrayOfBindings;
}
}
return bindings;
};
const splitName = fullname => { const splitName = fullname => {
const componentName = $(fullname, [ const componentName = $(fullname, [

2
packages/server/appPackages/testApp2/public/main/budibase-client.js.map
View File

File diff suppressed because one or more lines are too long

2
packages/server/appPackages/testApp2/public/main/clientAppDefinition.js
View File

File diff suppressed because one or more lines are too long

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

@ -19002,7 +19002,7 @@ var app = (function (exports) {
}; };
const setStateFromBinding = (store, binding, value) => const setStateFromBinding = (store, binding, value) =>
setState(store, binding.path, value); setState(store, binding[BB_STATE_BINDINGPATH], value);
const getState = (s, path, fallback) => { const getState = (s, path, fallback) => {
@ -19081,7 +19081,7 @@ var app = (function (exports) {
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -19368,10 +19368,12 @@ var app = (function (exports) {
fallback, propName, source fallback, propName, source
}); });
initialProps[propName] = getState( initialProps[propName] = !context
context || {}, ? val
binding, : getState(
fallback); context ,
binding,
fallback);
} else if(isEventType(val)) { } else if(isEventType(val)) {
@ -20502,19 +20504,14 @@ var app = (function (exports) {
if(!componentName || !libName) return; if(!componentName || !libName) return;
const { const {initialProps, bind} = setupBinding(
initialProps, bind,
boundProps, boundArrays,
contextBoundProps
} = setupBinding(
store, props, coreApi, store, props, coreApi,
context || parentContext, appDefinition.appRootPath); context || parentContext, appDefinition.appRootPath);
const bindings = buildBindings(boundProps, boundArrays, contextBoundProps);
const componentProps = { const componentProps = {
...initialProps, ...initialProps,
_bb:bb(bindings, context || parentContext) _bb:bb(context || parentContext, props)
}; };
const component = new (componentLibraries[libName][componentName])({ const component = new (componentLibraries[libName][componentName])({
@ -20571,7 +20568,7 @@ var app = (function (exports) {
if(isFunction(event)) event(context); if(isFunction(event)) event(context);
}; };
const bb = (bindings, context) => ({ const bb = (context, props) => ({
hydrateComponent: _initialiseComponent(context, true), hydrateComponent: _initialiseComponent(context, true),
appendComponent: _initialiseComponent(context, false), appendComponent: _initialiseComponent(context, false),
insertComponent: (props, htmlElement, anchor, context) => insertComponent: (props, htmlElement, anchor, context) =>
@ -20585,56 +20582,14 @@ var app = (function (exports) {
setState: (path, value) => setState(store, path, value), setState: (path, value) => setState(store, path, value),
getStateOrValue: (prop, currentContext) => getStateOrValue: (prop, currentContext) =>
getStateOrValue(globalState, prop, currentContext), getStateOrValue(globalState, prop, currentContext),
bindings, context,
context, props
}); });
return bb(); return bb();
}; };
const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
const bindings = {};
if(boundProps && boundProps.length > 0) {
for(let p of boundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(contextBoundProps && contextBoundProps.length > 0) {
for(let p of contextBoundProps) {
bindings[p.propName] = {
path: p.path,
fallback: p.fallback,
source: p.source
};
}
}
if(boundArrays && boundArrays.length > 0) {
for(let a of boundArrays) {
const arrayOfBindings = [];
for(let b of a.arrayOfBindings) {
arrayOfBindings.push(
buildBindings(
b.boundProps,
b.boundArrays,
b.contextBoundProps)
);
}
bindings[a.propName] = arrayOfBindings;
}
}
return bindings;
};
const splitName = fullname => { const splitName = fullname => {
const componentName = $(fullname, [ const componentName = $(fullname, [

2
packages/server/appPackages/testApp2/public/unauthenticated/budibase-client.js.map
View File

File diff suppressed because one or more lines are too long

75
packages/server/builder/budibase-client.esm.mjs
View File

File diff suppressed because one or more lines are too long

4
packages/server/builder/bundle.js
View File

@ -28379,7 +28379,7 @@
} }
const record = await api.get({ const record = await api.get({
url:`/api/record/${trimSlash(key)}` url:`/api/record/${trimSlash(recordKey)}`
}); });
if(api.isSuccess(record)) if(api.isSuccess(record))
@ -32331,7 +32331,7 @@
/******/ }); /******/ });
}); });
//# sourceMappingURL=feather.js.map
}); });
var feather$1 = unwrapExports(feather); var feather$1 = unwrapExports(feather);

2
packages/server/builder/bundle.js.map
View File

File diff suppressed because one or more lines are too long

14
packages/standard-components/components.json
View File

@ -162,13 +162,16 @@
"children": { "children": {
"type":"array", "type":"array",
"elementDefinition": { "elementDefinition": {
"control":"component", "component":"component",
"gridColumn":"string",
"gridRow":"string",
"gridColumnStart":"string", "gridColumnStart":"string",
"gridColumnEnd":"string", "gridColumnEnd":"string",
"gridRowStart":"string", "gridRowStart":"string",
"gridRowEnd":"string" "gridRowEnd":"string",
"justifySelf": {
"type":"options",
"options":["start", "center", "end", "stretch"],
"default":"stretch"
}
} }
}, },
"width": {"type":"string","default":"auto"}, "width": {"type":"string","default":"auto"},
@ -297,7 +300,8 @@
"children": { "children": {
"type":"array", "type":"array",
"elementDefinition": { "elementDefinition": {
"component":"component" "component":"component",
"className": "string"
} }
}, },
"className":"string", "className":"string",

54
packages/standard-components/src/Div.svelte
View File

@ -13,18 +13,53 @@ let staticComponentsApplied=false;
let dataBoundComponents = []; let dataBoundComponents = [];
let previousData; let previousData;
let onLoadCalled = false; let onLoadCalled = false;
let staticHtmlElements = {};
const hasData = () => const hasData = () =>
Array.isArray(data) && data.length > 0; Array.isArray(data) && data.length > 0;
const staticElementsInitialised = () => {
if(!children) return false;
if(children.filter(c => c.className).length === Object.keys(staticHtmlElements).length)
return true;
}
const getStaticAnchor = (elementIndex) => {
const nextElements = Object.keys(staticHtmlElements).filter(k => k > elementIndex);
return nextElements.length === 0
? null
: staticHtmlElements[Math.min(...nextElements)];
}
$: { $: {
if(rootDiv) { if(rootDiv) {
if(children && children.length > 0 && !staticComponentsApplied) { if(children && children.length > 0
for(let child of children) { && !staticComponentsApplied
_bb.appendComponent( && staticElementsInitialised()) {
child.component, let index = 0;
rootDiv); for(let child of _bb.props.children) {
if(child.className) {
_bb.hydrateComponent(
child.component,
staticHtmlElements[index]);
} else {
const anchor = getStaticAnchor(index);
if(!anchor) {
_bb.appendComponent(
child.component,
rootDiv);
} else {
_bb.insertComponent(
child.component,
rootDiv,
anchor);
}
}
index += 1;
} }
staticComponentsApplied = true; staticComponentsApplied = true;
} }
@ -42,7 +77,7 @@ $: {
let index = 0; let index = 0;
for(let dataItem of data) { for(let dataItem of data) {
_bb.appendComponent( _bb.appendComponent(
dataItemComponent, _bb.props.dataItemComponent,
rootDiv, rootDiv,
dataItem dataItem
); );
@ -61,5 +96,12 @@ $: {
</script> </script>
<div class="{className}" bind:this={rootDiv}> <div class="{className}" bind:this={rootDiv}>
{#each children as child, index}
{#if child.className}
<div class="{child.className}"
bind:this={staticHtmlElements[index]}>
</div>
{/if}
{/each}
</div> </div>

2
packages/standard-components/src/Form.svelte
View File

@ -17,7 +17,7 @@ $ : {
if(_bb && htmlElements) { if(_bb && htmlElements) {
for(let el in htmlElements) { for(let el in htmlElements) {
_bb.hydrateComponent( _bb.hydrateComponent(
formControls[el].control, _bb.props.formControls[el].control,
htmlElements[el] htmlElements[el]
); );
} }

17
packages/standard-components/src/Grid.svelte
View File

@ -5,8 +5,6 @@ import {buildStyle} from "./buildStyle";
export let gridTemplateRows =""; export let gridTemplateRows ="";
export let gridTemplateColumns =""; export let gridTemplateColumns ="";
export let children = []; export let children = [];
export let width = "auto";
export let height = "auto";
export let containerClass=""; export let containerClass="";
export let itemContainerClass=""; export let itemContainerClass="";
@ -20,15 +18,16 @@ export let _bb;
let style=""; let style="";
let htmlElements = {}; let htmlElements = {};
let isInitilised = false;
$ : { $ : {
if(_bb && htmlElements) { if(!isInitilised && _bb && htmlElements && Object.keys(htmlElements).length > 0) {
for(let el in htmlElements) { for(let el in htmlElements) {
_bb.hydrateComponent( _bb.hydrateComponent(
children[el].control, _bb.props.children[el].component,
htmlElements[el] htmlElements[el]
); );
} }
isInitilised = true;
} }
} }
@ -36,16 +35,14 @@ const childStyle = child =>
buildStyle({ buildStyle({
"grid-column-start": child.gridColumnStart, "grid-column-start": child.gridColumnStart,
"grid-column-end": child.gridColumnEnd, "grid-column-end": child.gridColumnEnd,
"grid-column": child.gridColumn,
"grid-row-start": child.gridRowStart, "grid-row-start": child.gridRowStart,
"grid-row-end": child.gridRowStart, "grid-row-end": child.gridRowStart
"grid-row": child.gridRow,
}); });
</script> </script>
<div class="root {containerClass}" <div class="root {containerClass}"
style="width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};"> style="grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};">
{#each children as child, index} {#each children as child, index}
<div class="{itemContainerClass}" <div class="{itemContainerClass}"
style={childStyle(child)} style={childStyle(child)}
@ -58,6 +55,8 @@ const childStyle = child =>
.root { .root {
display: grid; display: grid;
width: 100%;
height: 100%;
} }
</style> </style>

4
packages/standard-components/src/If.svelte
View File

@ -33,10 +33,10 @@ $: {
if(result) { if(result) {
currentComponent = _bb.hydrateComponent( currentComponent = _bb.hydrateComponent(
thenComponent,element); _bb.props.thenComponent,element);
} else if(elseComponent && elseComponent._component) { } else if(elseComponent && elseComponent._component) {
currentComponent = _bb.hydrateComponent( currentComponent = _bb.hydrateComponent(
elseComponent,element); _bb.props.elseComponent,element);
} }
} }

2
packages/standard-components/src/Input.svelte
View File

@ -10,7 +10,7 @@ let actualValue = "";
const onchange = (ev) => { const onchange = (ev) => {
if(_bb) { if(_bb) {
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value); _bb.setStateFromBinding(_bb.props.value, ev.target.value);
} }
} }

2
packages/standard-components/src/Nav.svelte
View File

@ -54,7 +54,7 @@ const onSelectItem = (index) => () => {
selectedIndex = index; selectedIndex = index;
if(!components[index]) { if(!components[index]) {
const comp = _bb.hydrateComponent( const comp = _bb.hydrateComponent(
items[index].component, componentElements[index]); _bb.props.items[index].component, componentElements[index]);
components[index] = comp; components[index] = comp;
} }
} }

2
packages/standard-components/src/Panel.svelte
View File

@ -37,7 +37,7 @@ $: {
}); });
if(_bb && component && componentElement && !componentInitialised) { if(_bb && component && componentElement && !componentInitialised) {
_bb.hydrateComponent(component, componentElement); _bb.hydrateComponent(_bb.props.component, componentElement);
componentInitialised = true; componentInitialised = true;
} }

2
packages/standard-components/src/Select.svelte
View File

@ -11,7 +11,7 @@ let actualValue = "";
const onchange = (ev) => { const onchange = (ev) => {
if(_bb) { if(_bb) {
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value); _bb.setStateFromBinding(_bb.props.value, ev.target.value);
} }
} }

4
packages/standard-components/src/StackPanel.svelte
View File

@ -44,7 +44,7 @@ $: {
for(let el in staticHtmlElements) { for(let el in staticHtmlElements) {
staticComponents[el] = _bb.hydrateComponent( staticComponents[el] = _bb.hydrateComponent(
children[el].control, _bb.props.children[el].control,
staticHtmlElements[el] staticHtmlElements[el]
); );
} }
@ -62,7 +62,7 @@ $: {
let index = 0; let index = 0;
for(let d in dataBoundElements) { for(let d in dataBoundElements) {
_bb.hydrateComponent( _bb.hydrateComponent(
dataItemComponent, _bb.props.dataItemComponent,
dataBoundElements[d], dataBoundElements[d],
data[parseInt(d)] data[parseInt(d)]
); );

2
packages/standard-components/src/Table.svelte
View File

@ -17,7 +17,7 @@ const rowClickHandler = (row) => () => {
const cellValue = (colIndex, row) => { const cellValue = (colIndex, row) => {
const val = _bb.getStateOrValue( const val = _bb.getStateOrValue(
_bb.bindings.columns[colIndex].value _bb.props.columns[colIndex].value
, row) , row)
return val; return val;
} }

2
packages/standard-components/src/Textbox.svelte
View File

@ -10,7 +10,7 @@ let actualValue = "";
const onchange = (ev) => { const onchange = (ev) => {
if(_bb) { if(_bb) {
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value); _bb.setStateFromBinding(_bb.props.value, ev.target.value);
} }
} }

2
packages/standard-components/src/button.svelte
View File

@ -38,7 +38,7 @@ const createClasses = (classes) => {
$:{ $:{
if(_bb && contentComponentContainer && contentComponent._component) if(_bb && contentComponentContainer && contentComponent._component)
_bb.hydrateComponent(contentComponent, contentComponentContainer); _bb.hydrateComponent(_bb.props.contentComponent, contentComponentContainer);
cssVariables = { cssVariables = {
hoverColor, hoverBorder, hoverColor, hoverBorder,