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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@ -13,18 +13,53 @@ let staticComponentsApplied=false;
let dataBoundComponents = [];
let previousData;
let onLoadCalled = false;
let staticHtmlElements = {};
const hasData = () =>
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(children && children.length > 0 && !staticComponentsApplied) {
for(let child of children) {
_bb.appendComponent(
child.component,
rootDiv);
if(children && children.length > 0
&& !staticComponentsApplied
&& staticElementsInitialised()) {
let index = 0;
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;
}
@ -42,7 +77,7 @@ $: {
let index = 0;
for(let dataItem of data) {
_bb.appendComponent(
dataItemComponent,
_bb.props.dataItemComponent,
rootDiv,
dataItem
);
@ -61,5 +96,12 @@ $: {
</script>
<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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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