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

Merge branch 'master' of https://github.com/Budibase/budibase into bugfix/event-handling-button-textfield

This commit is contained in:
Conor Mack 2020-02-14 14:00:39 +00:00
parent 61b665b384 c9961feee5
commit 1cc3b0f880
60 changed files with 14416 additions and 18116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bootstrap-components/src/generators/formsGenerator.js
View File

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

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

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

56
packages/builder/src/builderStore/store.js
View File

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

10
packages/builder/src/userInterface/PropControl.svelte
View File

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

26
packages/builder/src/userInterface/PropsView.svelte
View File

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

2
packages/builder/src/userInterface/StateBindingControl.svelte
View File

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

15
packages/builder/src/userInterface/pagesParsing/createProps.js
View File

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

3
packages/builder/tests/buildStateOrigins.spec.js
View File

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

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

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

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

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

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

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

17
packages/client/src/render/initialiseChildren.js → packages/client/src/render/attachChildren.js
View File

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

2
packages/client/src/render/renderComponent.js
View File

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

2
packages/client/src/render/screenSlotComponent.js
View File

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

9
packages/client/tests/testAppDef.js
View File

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

24
packages/materialdesign-components/src/Test/rootComponent.js
View File

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

3
packages/server/appPackages/testApp/pages/main/page.json
View File

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

5
packages/server/appPackages/testApp/pages/main/screens/screen1.json
View File

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

5
packages/server/appPackages/testApp/pages/main/screens/screen2.json
View File

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

3
packages/server/appPackages/testApp/pages/unauthenticated/page.json
View File

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

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

@ -1,2 +1,2 @@
window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[],"nodeId":0},"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/div"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]}; window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[],"nodeId":0},"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/container"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/container","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/container","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]};
window['##BUDIBASE_UIFUNCTIONS##'] = {'1234':() => 'test return'} window['##BUDIBASE_UIFUNCTIONS##'] = {'1234':() => 'test return'}

2
packages/server/appPackages/testApp/public/main/clientFrontendDefinition.js
View File

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

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

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

6
packages/server/appPackages/testApp2/components/Contact/Contact Form.json
View File

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

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

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

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

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

6
packages/server/appPackages/testApp2/components/customer/customer Form.json
View File

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

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

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

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

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

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

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

4
packages/server/utilities/builder/buildPage.js
View File

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

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

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

2
packages/standard-components/dist/generators.js vendored
View File

File diff suppressed because one or more lines are too long

1
packages/standard-components/package.json
View File

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

11
packages/standard-components/public/bundle.css
View File

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

14
packages/standard-components/public/bundle.css.map
View File

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

31389
packages/standard-components/public/bundle.js
View File

File diff suppressed because it is too large Load Diff

2
packages/standard-components/public/bundle.js.map
View File

File diff suppressed because one or more lines are too long

1
packages/standard-components/public/index.html
View File

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

4
packages/standard-components/rollup.testconfig.js
View File

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

49
packages/standard-components/src/Container.svelte Normal file
View File

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

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

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

8
packages/standard-components/src/H1.svelte
View File

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

8
packages/standard-components/src/H2.svelte
View File

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

8
packages/standard-components/src/H3.svelte
View File

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

8
packages/standard-components/src/H4.svelte
View File

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

8
packages/standard-components/src/H5.svelte
View File

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

10
packages/standard-components/src/H6.svelte
View File

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

24
packages/standard-components/src/Heading.svelte Normal file
View File

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

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

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

14
packages/standard-components/src/Option.svelte Normal file
View File

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

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

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

37
packages/standard-components/src/Test/TestApp.svelte
View File

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

51
packages/standard-components/src/Test/createApp.js
View File

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

252
packages/standard-components/src/Test/props.js
View File

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

15
packages/standard-components/src/Test/rootComponent.js Normal file
View File

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

3
packages/standard-components/src/Test/testComponents.js Normal file
View File

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

36
packages/standard-components/src/Text.svelte
View File

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

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

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

20
packages/standard-components/src/index.js
View File

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