Merge branch 'master' of https://github.com/Budibase/budibase into bugfix/event-handling-button-textfield
This commit is contained in:
Conor Mack
commit
5529be8abf
|
|
@ -10,7 +10,7 @@ export const formName = record => `${record.name}/${record.name} Form`
|
|||
const root = record => ({
|
||||
name: formName(record),
|
||||
description: `Control for creating/updating '${record.nodeKey()}' `,
|
||||
inherits: "@budibase/standard-components/div",
|
||||
inherits: "@budibase/standard-components/container",
|
||||
props: {
|
||||
className: "p-1",
|
||||
children: [
|
||||
|
|
@ -117,7 +117,7 @@ const saveCancelButtons = record => ({
|
|||
|
||||
const paddedPanelForButton = button => ({
|
||||
control: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
className: "btn-group",
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const homepageComponentName = record =>
|
|||
`${record.name}/${record.name} homepage`
|
||||
|
||||
const component = ({ record, index }) => ({
|
||||
inherits: "@budibase/standard-components/div",
|
||||
inherits: "@budibase/standard-components/container",
|
||||
name: homepageComponentName(record),
|
||||
props: {
|
||||
className: "d-flex flex-column h-100",
|
||||
|
|
@ -73,14 +73,14 @@ const component = ({ record, index }) => ({
|
|||
})
|
||||
|
||||
const homePageButtons = ({ index, record }) => ({
|
||||
inherits: "@budibase/standard-components/div",
|
||||
inherits: "@budibase/standard-components/container",
|
||||
name: `${record.name}/homepage buttons`,
|
||||
props: {
|
||||
className: "btn-toolbar mt-4 mb-2",
|
||||
children: [
|
||||
{
|
||||
component: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
className: "btn-group mr-3",
|
||||
children: [
|
||||
{
|
||||
|
|
@ -129,7 +129,7 @@ const homePageButtons = ({ index, record }) => ({
|
|||
_component: "@budibase/standard-components/if",
|
||||
condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`,
|
||||
thenComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
className: "btn-group",
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -29,7 +29,9 @@ import { rename } from "../userInterface/pagesParsing/renameScreen"
|
|||
import {
|
||||
getNewScreen,
|
||||
createProps,
|
||||
makePropsSafe,
|
||||
} from "../userInterface/pagesParsing/createProps"
|
||||
import { expandComponentDefinition } from "../userInterface/pagesParsing/types"
|
||||
import {
|
||||
loadLibs,
|
||||
loadLibUrls,
|
||||
|
|
@ -163,7 +165,9 @@ const initialise = (store, initial) => async () => {
|
|||
initial.accessLevels = pkg.accessLevels
|
||||
initial.screens = values(pkg.screens)
|
||||
initial.generators = generatorsArray(pkg.components.generators)
|
||||
initial.components = values(pkg.components.components)
|
||||
initial.components = values(pkg.components.components).map(
|
||||
expandComponentDefinition
|
||||
)
|
||||
initial.actions = values(pkg.appDefinition.actions)
|
||||
initial.triggers = pkg.appDefinition.triggers
|
||||
|
||||
|
|
@ -465,14 +469,22 @@ const _saveScreen = async (store, s, screen) => {
|
|||
const currentPageScreens = s.pages[s.currentPageName]._screens
|
||||
|
||||
await api
|
||||
.post(`/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`, screen)
|
||||
.post(
|
||||
`/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`,
|
||||
screen
|
||||
)
|
||||
.then(async savedScreen => {
|
||||
const updatedScreen = await savedScreen.json();
|
||||
const screens = [...currentPageScreens.filter(storeScreen => storeScreen.name !== updatedScreen.name), updatedScreen];
|
||||
const updatedScreen = await savedScreen.json()
|
||||
const screens = [
|
||||
...currentPageScreens.filter(
|
||||
storeScreen => storeScreen.name !== updatedScreen.name
|
||||
),
|
||||
updatedScreen,
|
||||
]
|
||||
s.pages[s.currentPageName]._screens = screens
|
||||
s.screens = screens
|
||||
_savePage(s);
|
||||
});
|
||||
_savePage(s)
|
||||
})
|
||||
|
||||
return s
|
||||
}
|
||||
|
|
@ -508,7 +520,11 @@ const setCurrentScreen = store => screenName => {
|
|||
|
||||
s.currentPreviewItem = screen
|
||||
s.currentFrontEndType = "screen"
|
||||
s.currentComponentInfo = screen.props
|
||||
|
||||
s.currentComponentInfo = makePropsSafe(
|
||||
getContainerComponent(s.components),
|
||||
screen.props
|
||||
)
|
||||
|
||||
setCurrentScreenFunctions(s)
|
||||
return s
|
||||
|
|
@ -575,7 +591,7 @@ const renameScreen = store => (oldname, newname) => {
|
|||
const saveAllChanged = async () => {
|
||||
for (let screenName of changedScreens) {
|
||||
const changedScreen = getExactComponent(screens, screenName)
|
||||
const updatedScreen = await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
|
||||
await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -620,7 +636,7 @@ const addComponentLibrary = store => async lib => {
|
|||
if (success) {
|
||||
const componentsArray = []
|
||||
for (let c in components) {
|
||||
componentsArray.push(components[c])
|
||||
componentsArray.push(expandComponentDefinition(components[c]))
|
||||
}
|
||||
|
||||
s.components = pipe(s.components, [
|
||||
|
|
@ -671,6 +687,7 @@ const refreshComponents = store => async () => {
|
|||
const components = pipe(componentsAndGenerators.components, [
|
||||
keys,
|
||||
map(k => ({ ...componentsAndGenerators[k], name: k })),
|
||||
map(c => expandComponentDefinition(c)),
|
||||
])
|
||||
|
||||
store.update(s => {
|
||||
|
|
@ -689,7 +706,7 @@ const _savePage = async s => {
|
|||
await api.post(`/_builder/api/${appname}/pages/${s.currentPageName}`, {
|
||||
page: { componentLibraries: s.pages.componentLibraries, ...page },
|
||||
uiFunctions: "{'1234':() => 'test return'}",
|
||||
screens: page.screens,
|
||||
screens: page._screens,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -713,7 +730,10 @@ const setCurrentPage = store => pageName => {
|
|||
s.screens = Array.isArray(current_screens)
|
||||
? current_screens
|
||||
: Object.values(current_screens)
|
||||
s.currentComponentInfo = s.pages[pageName].props
|
||||
s.currentComponentInfo = makePropsSafe(
|
||||
getContainerComponent(s.components),
|
||||
s.pages[pageName].props
|
||||
)
|
||||
s.currentPreviewItem = s.pages[pageName]
|
||||
|
||||
setCurrentScreenFunctions(s)
|
||||
|
|
@ -721,6 +741,9 @@ const setCurrentPage = store => pageName => {
|
|||
})
|
||||
}
|
||||
|
||||
const getContainerComponent = components =>
|
||||
components.find(c => c.name === "@budibase/standard-components/container")
|
||||
|
||||
const addChildComponent = store => componentName => {
|
||||
store.update(s => {
|
||||
const component = s.components.find(c => c.name === componentName)
|
||||
|
|
@ -738,7 +761,8 @@ const addChildComponent = store => componentName => {
|
|||
|
||||
const selectComponent = store => component => {
|
||||
store.update(s => {
|
||||
s.currentComponentInfo = component
|
||||
const componentDef = s.components.find(c => c.name === component._component)
|
||||
s.currentComponentInfo = makePropsSafe(componentDef, component)
|
||||
return s
|
||||
})
|
||||
}
|
||||
|
|
@ -748,9 +772,11 @@ const setComponentProp = store => (name, value) => {
|
|||
const current_component = s.currentComponentInfo
|
||||
s.currentComponentInfo[name] = value
|
||||
|
||||
s.currentFrontEndType === "page"
|
||||
? _savePage(s, s.currentPreviewItem)
|
||||
: _saveScreen(store, s, s.currentPreviewItem)
|
||||
if (s.currentFrontEndType) {
|
||||
_savePage(s)
|
||||
} else {
|
||||
_saveScreen(store, s, s.currentPreviewItem)
|
||||
}
|
||||
|
||||
s.currentComponentInfo = current_component
|
||||
return s
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
export let index
|
||||
export let prop_name
|
||||
export let prop_value
|
||||
export let prop_type = {}
|
||||
|
||||
$: isOdd = index % 2 !== 0
|
||||
export let prop_definition = {}
|
||||
|
||||
const setComponentProp = props => {
|
||||
setProp(propDef.____name, props)
|
||||
|
|
@ -18,12 +16,12 @@
|
|||
</script>
|
||||
|
||||
<div class="root">
|
||||
{#if prop_type !== 'event'}
|
||||
{#if prop_definition.type !== 'event'}
|
||||
<h5>{prop_name}</h5>
|
||||
<StateBindingControl
|
||||
value={prop_value}
|
||||
type={prop_type}
|
||||
options={prop_type.options}
|
||||
type={prop_definition.type}
|
||||
options={prop_definition.options}
|
||||
onChanged={v => setProp(prop_name, v)} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,46 +10,38 @@
|
|||
export let components
|
||||
|
||||
let errors = []
|
||||
let props = {}
|
||||
const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"]
|
||||
|
||||
$: componentDef =
|
||||
component && components &&
|
||||
components.find(({ name }) => name === component._component)
|
||||
|
||||
$: propDefs =
|
||||
component &&
|
||||
Object.entries(component).filter(
|
||||
([name]) => !props_to_ignore.includes(name)
|
||||
)
|
||||
|
||||
function find_type(prop_name) {
|
||||
if (!component._component) return
|
||||
return components.find(({ name }) => name === component._component).props[
|
||||
prop_name
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
let setProp = (name, value) => {
|
||||
onPropChanged(name, value)
|
||||
}
|
||||
|
||||
const fieldHasError = propName => some(e => e.propName === propName)(errors)
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
||||
<form class="uk-form-stacked form-root">
|
||||
{#each propDefs as [prop_name, prop_value], index}
|
||||
{#if componentDef}
|
||||
{#each Object.entries(componentDef.props) as [prop_name, prop_def], index}
|
||||
<div class="prop-container">
|
||||
|
||||
<PropControl
|
||||
{setProp}
|
||||
{prop_name}
|
||||
{prop_value}
|
||||
prop_type={find_type(prop_name)}
|
||||
prop_value={component[prop_name]}
|
||||
prop_definition={prop_def}
|
||||
{index}
|
||||
disabled={false} />
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
class="uk-select uk-form-small"
|
||||
{value}
|
||||
on:change={ev => onChanged(ev.target.value)}>
|
||||
{#each options as option}
|
||||
{#each (options || []) as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,21 @@ export const createProps = (componentDefinition, derivedFromProps) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const makePropsSafe = (componentDefinition, props) => {
|
||||
const safeProps = createProps(componentDefinition, props).props
|
||||
for (let propName in safeProps) {
|
||||
props[propName] = safeProps[propName]
|
||||
}
|
||||
|
||||
for (let propName in props) {
|
||||
if (safeProps[propName] === undefined) {
|
||||
delete props[propName]
|
||||
}
|
||||
}
|
||||
|
||||
return props
|
||||
}
|
||||
|
||||
const parsePropDef = propDef => {
|
||||
const error = message => ({ error: message, propDef })
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@ it("builds the correct stateOrigins object from a screen definition with handler
|
|||
"name": "screen1",
|
||||
"description": "",
|
||||
"props": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "",
|
||||
"type": "div",
|
||||
"onClick": [
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
"stylesheets": [],
|
||||
"componentLibraries": ["@budibase/standard-components"],
|
||||
"props" : {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_children": [],
|
||||
"_id": 0,
|
||||
"type": "div",
|
||||
"_styles": {
|
||||
"layout": {},
|
||||
"position": {}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
"stylesheets": [],
|
||||
"componentLibraries": ["@budibase/standard-components"],
|
||||
"props" : {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_children": [],
|
||||
"_id": 1,
|
||||
"type": "div",
|
||||
"_styles": {
|
||||
"layout": {},
|
||||
"position": {}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { getStateOrValue } from "./state/getState"
|
|||
import { setState, setStateFromBinding } from "./state/setState"
|
||||
import { trimSlash } from "./common/trimSlash"
|
||||
import { isBound } from "./state/isState"
|
||||
import { initialiseChildren } from "./render/initialiseChildren"
|
||||
import { attachChildren } from "./render/attachChildren"
|
||||
import { createTreeNode } from "./render/renderComponent"
|
||||
import { screenRouter } from "./render/screenRouter"
|
||||
|
||||
|
|
@ -59,14 +59,13 @@ export const createApp = (
|
|||
|
||||
const onScreenSlotRendered = screenSlotNode => {
|
||||
const onScreenSelected = (screen, store, url) => {
|
||||
const { getInitialiseParams, unsubscribe } = initialiseChildrenParams(
|
||||
store
|
||||
)
|
||||
const initialiseChildParams = getInitialiseParams(true, screenSlotNode)
|
||||
initialiseChildren(initialiseChildParams)(
|
||||
[screen.props],
|
||||
screenSlotNode.rootElement
|
||||
)
|
||||
const { getInitialiseParams, unsubscribe } = attachChildrenParams(store)
|
||||
screenSlotNode.props._children = [screen.props]
|
||||
const initialiseChildParams = getInitialiseParams(screenSlotNode)
|
||||
attachChildren(initialiseChildParams)(screenSlotNode.rootElement, {
|
||||
hydrate: true,
|
||||
force: true,
|
||||
})
|
||||
if (currentScreenUbsubscribe) currentScreenUbsubscribe()
|
||||
currentScreenUbsubscribe = unsubscribe
|
||||
currentScreenStore = store
|
||||
|
|
@ -77,20 +76,19 @@ export const createApp = (
|
|||
routeTo(currentUrl || window.location.pathname)
|
||||
}
|
||||
|
||||
const initialiseChildrenParams = store => {
|
||||
const attachChildrenParams = store => {
|
||||
let currentState = null
|
||||
const unsubscribe = store.subscribe(s => {
|
||||
currentState = s
|
||||
})
|
||||
|
||||
const getInitialiseParams = (hydrate, treeNode) => ({
|
||||
const getInitialiseParams = treeNode => ({
|
||||
bb: getBbClientApi,
|
||||
coreApi,
|
||||
store,
|
||||
document,
|
||||
componentLibraries,
|
||||
frontendDefinition,
|
||||
hydrate,
|
||||
uiFunctions,
|
||||
treeNode,
|
||||
onScreenSlotRendered,
|
||||
|
|
@ -98,18 +96,7 @@ export const createApp = (
|
|||
|
||||
const getBbClientApi = (treeNode, componentProps) => {
|
||||
return {
|
||||
hydrateChildren: initialiseChildren(
|
||||
getInitialiseParams(true, treeNode)
|
||||
),
|
||||
appendChildren: initialiseChildren(
|
||||
getInitialiseParams(false, treeNode)
|
||||
),
|
||||
insertChildren: (props, htmlElement, anchor) =>
|
||||
initialiseChildren(getInitialiseParams(false, treeNode))(
|
||||
props,
|
||||
htmlElement,
|
||||
anchor
|
||||
),
|
||||
attachChildren: attachChildren(getInitialiseParams(treeNode)),
|
||||
context: treeNode.context,
|
||||
props: componentProps,
|
||||
call: safeCallEvent,
|
||||
|
|
@ -134,10 +121,17 @@ export const createApp = (
|
|||
currentUrl = urlPath
|
||||
|
||||
rootTreeNode = createTreeNode()
|
||||
const { getInitialiseParams } = initialiseChildrenParams(pageStore)
|
||||
const initChildParams = getInitialiseParams(true, rootTreeNode)
|
||||
rootTreeNode.props = {
|
||||
_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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@ import { $ } from "../core/common"
|
|||
import { renderComponent } from "./renderComponent"
|
||||
import { isScreenSlot } from "./builtinComponents"
|
||||
|
||||
export const initialiseChildren = initialiseOpts => (
|
||||
childrenProps,
|
||||
htmlElement,
|
||||
anchor = null
|
||||
) => {
|
||||
export const attachChildren = initialiseOpts => (htmlElement, options) => {
|
||||
const {
|
||||
uiFunctions,
|
||||
bb,
|
||||
|
|
@ -17,10 +13,15 @@ export const initialiseChildren = initialiseOpts => (
|
|||
componentLibraries,
|
||||
treeNode,
|
||||
frontendDefinition,
|
||||
hydrate,
|
||||
onScreenSlotRendered,
|
||||
} = initialiseOpts
|
||||
|
||||
const anchor = options && options.anchor ? options.anchor : null
|
||||
const force = options ? options.force : false
|
||||
const hydrate = options ? options.hydrate : true
|
||||
|
||||
if (!force && treeNode.children.length > 0) return treeNode.children
|
||||
|
||||
for (let childNode of treeNode.children) {
|
||||
childNode.destroy()
|
||||
}
|
||||
|
|
@ -34,7 +35,7 @@ export const initialiseChildren = initialiseOpts => (
|
|||
htmlElement.classList.add(`lay-${treeNode.props._id}`)
|
||||
|
||||
const renderedComponents = []
|
||||
for (let childProps of childrenProps) {
|
||||
for (let childProps of treeNode.props._children) {
|
||||
const { componentName, libName } = splitName(childProps._component)
|
||||
|
||||
if (!componentName || !libName) return
|
||||
|
|
@ -74,6 +75,8 @@ export const initialiseChildren = initialiseOpts => (
|
|||
}
|
||||
}
|
||||
|
||||
treeNode.children = renderedComponents
|
||||
|
||||
return renderedComponents
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ export const renderComponent = ({
|
|||
|
||||
thisNode.rootElement = htmlElement.children[htmlElement.children.length - 1]
|
||||
|
||||
if (initialProps._id) {
|
||||
if (initialProps._id && thisNode.rootElement) {
|
||||
thisNode.rootElement.classList.add(`pos-${initialProps._id}`)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export const screenSlotComponent = window => {
|
|||
return function(opts) {
|
||||
const node = window.document.createElement("DIV")
|
||||
const $set = props => {
|
||||
props._bb.hydrateChildren(props._children, node)
|
||||
props._bb.attachChildren(node)
|
||||
}
|
||||
const $destroy = () => {
|
||||
if (opts.target && node) opts.target.removeChild(node)
|
||||
|
|
|
|||
|
|
@ -111,13 +111,12 @@ const maketestlib = window => ({
|
|||
for (let c of childNodes) {
|
||||
node.removeChild(c)
|
||||
}
|
||||
const components = currentProps._bb.appendChildren(
|
||||
currentProps._children,
|
||||
node
|
||||
)
|
||||
const components = currentProps._bb.attachChildren(node, {
|
||||
hydrate: false,
|
||||
})
|
||||
childNodes = components.map(c => c.component._element)
|
||||
} else {
|
||||
currentProps._bb.hydrateChildren(currentProps._children, node)
|
||||
currentProps._bb.attachChildren(node)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
export const rootComponent = window => {
|
||||
return function(opts) {
|
||||
const node = window.document.createElement("DIV")
|
||||
const $set = props => {
|
||||
props._bb.hydrateChildren(props._children, 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)
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"./moreCustomComponents"
|
||||
],
|
||||
"props": {
|
||||
"_component": "@budibase/standard-components/div"
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"type": "div"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
"name": "screen1",
|
||||
"description": "",
|
||||
"props": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"className": ""
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "",
|
||||
"type": "div"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
"name": "screen2",
|
||||
"description": "",
|
||||
"props": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"className": ""
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "",
|
||||
"type": "div",
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"stylesheets": ["my-styles.css"],
|
||||
"componentLibraries": ["./customComponents","./moreCustomComponents"],
|
||||
"props" : {
|
||||
"_component": "@budibase/standard-components/div"
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"type": "div",
|
||||
}
|
||||
}
|
||||
|
|
@ -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'}
|
||||
|
|
@ -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'}
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.isEditingcustomer",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
{
|
||||
"_component": "children#array_element#",
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -338,7 +338,7 @@
|
|||
{
|
||||
"_component": "children#array_element#",
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -406,17 +406,17 @@
|
|||
"onLoad": []
|
||||
},
|
||||
"elseComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -502,7 +502,7 @@
|
|||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -682,7 +682,7 @@
|
|||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.isEditingContact",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -738,7 +738,7 @@
|
|||
{
|
||||
"_component": "children#array_element#",
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -789,7 +789,7 @@
|
|||
{
|
||||
"_component": "children#array_element#",
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -857,17 +857,17 @@
|
|||
"onLoad": []
|
||||
},
|
||||
"elseComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
@ -953,7 +953,7 @@
|
|||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"children": [
|
||||
{
|
||||
"_component": "children#array_element#",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "Contact/Contact Form",
|
||||
"description": "Control for creating/updating '/contacts/3-{id}' ",
|
||||
"inherits": "@budibase/standard-components/div",
|
||||
"inherits": "@budibase/standard-components/container",
|
||||
"props": {
|
||||
"className": "p-1",
|
||||
"children": [
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
"children": [
|
||||
{
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
},
|
||||
{
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"inherits": "@budibase/standard-components/div",
|
||||
"inherits": "@budibase/standard-components/container",
|
||||
"name": "Contact/Contact homepage",
|
||||
"props": {
|
||||
"className": "d-flex flex-column h-100",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"inherits": "@budibase/standard-components/div",
|
||||
"inherits": "@budibase/standard-components/container",
|
||||
"name": "Contact/homepage buttons",
|
||||
"props": {
|
||||
"className": "btn-toolbar mt-4 mb-2",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group mr-3",
|
||||
"children": [
|
||||
{
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "customer/customer Form",
|
||||
"description": "Control for creating/updating '/customers/1-{id}' ",
|
||||
"inherits": "@budibase/standard-components/div",
|
||||
"inherits": "@budibase/standard-components/container",
|
||||
"props": {
|
||||
"className": "p-1",
|
||||
"children": [
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
"children": [
|
||||
{
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
},
|
||||
{
|
||||
"control": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"inherits": "@budibase/standard-components/div",
|
||||
"inherits": "@budibase/standard-components/container",
|
||||
"name": "customer/customer homepage",
|
||||
"props": {
|
||||
"className": "d-flex flex-column h-100",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"inherits": "@budibase/standard-components/div",
|
||||
"inherits": "@budibase/standard-components/container",
|
||||
"name": "customer/homepage buttons",
|
||||
"props": {
|
||||
"className": "btn-toolbar mt-4 mb-2",
|
||||
"children": [
|
||||
{
|
||||
"component": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group mr-3",
|
||||
"children": [
|
||||
{
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
"_component": "@budibase/standard-components/if",
|
||||
"condition": "$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
|
||||
"thenComponent": {
|
||||
"_component": "@budibase/standard-components/div",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"className": "btn-group",
|
||||
"children": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
_component: "@budibase/standard-components/if",
|
||||
condition: "$store.isEditingcustomer",
|
||||
thenComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -285,7 +285,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
{
|
||||
_component: "children#array_element#",
|
||||
control: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -329,7 +329,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
{
|
||||
_component: "children#array_element#",
|
||||
control: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -384,17 +384,17 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
onLoad: [],
|
||||
},
|
||||
elseComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
component: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
component: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -475,7 +475,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
condition:
|
||||
"$store.selectedrow_all_customers && $store.selectedrow_all_customers.length > 0",
|
||||
thenComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -632,7 +632,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
_component: "@budibase/standard-components/if",
|
||||
condition: "$store.isEditingContact",
|
||||
thenComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -688,7 +688,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
{
|
||||
_component: "children#array_element#",
|
||||
control: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -732,7 +732,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
{
|
||||
_component: "children#array_element#",
|
||||
control: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -787,17 +787,17 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
onLoad: [],
|
||||
},
|
||||
elseComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
component: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
component: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
@ -878,7 +878,7 @@ window["##BUDIBASE_APPDEFINITION##"] = {
|
|||
condition:
|
||||
"$store.selectedrow_all_contacts && $store.selectedrow_all_contacts.length > 0",
|
||||
thenComponent: {
|
||||
_component: "@budibase/standard-components/div",
|
||||
_component: "@budibase/standard-components/container",
|
||||
children: [
|
||||
{
|
||||
_component: "children#array_element#",
|
||||
|
|
|
|||
|
|
@ -151,6 +151,10 @@ const savePageJson = async (appPath, pageName, pkg) => {
|
|||
delete pkg.page.name
|
||||
}
|
||||
|
||||
if (pkg.page._screens) {
|
||||
delete pkg.page._screens
|
||||
}
|
||||
|
||||
await writeJSON(pageFile, pkg.page, {
|
||||
spaces: 2,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -79,28 +79,28 @@
|
|||
"tags": ["form"]
|
||||
},
|
||||
"select" : {
|
||||
"name": "Input",
|
||||
"description": "An HTML input",
|
||||
"name": "Select",
|
||||
"description": "An HTML <select> (dropdown)",
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"className": "string"
|
||||
}
|
||||
},
|
||||
"option" : {
|
||||
"name": "Option",
|
||||
"description": "An HTML <option>, to be used with <select>",
|
||||
"children": false,
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"options": {
|
||||
"type" : "array",
|
||||
"elementDefinition" : {
|
||||
"id":"string",
|
||||
"value":"string"
|
||||
}
|
||||
},
|
||||
"className": "string"
|
||||
},
|
||||
"tags": ["form"]
|
||||
"text": "string"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"name": "Text",
|
||||
"description": "stylable block of text",
|
||||
"children": false,
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"text": "string",
|
||||
"font": "string",
|
||||
"color": "string",
|
||||
"textAlign": {
|
||||
|
|
@ -116,116 +116,66 @@
|
|||
"options": [
|
||||
"top", "middle", "bottom"
|
||||
]
|
||||
},
|
||||
"formattingTag": {
|
||||
"type": "options",
|
||||
"default":"none",
|
||||
"options": [
|
||||
"none",
|
||||
"<b> - bold",
|
||||
"<strong> - important",
|
||||
"<i> - italic",
|
||||
"<em> - emphasized",
|
||||
"<mark> - marked text",
|
||||
"<small> - small",
|
||||
"<del> - deleted",
|
||||
"<ins> - inserted",
|
||||
"<sub> - subscript",
|
||||
"<sup> - superscript"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tags": ["div", "container"]
|
||||
},
|
||||
"nav": {
|
||||
"name": "Nav",
|
||||
"description": "A nav - a side bar of buttons that control the currently active component",
|
||||
"props" : {
|
||||
"navBarBackground": {"type" :"string", "default":"silver"},
|
||||
"navBarBorder": "string",
|
||||
"navBarColor": {"type" :"string", "default":"black"},
|
||||
"selectedItemBackground": {"type" :"string", "default":"white"},
|
||||
"selectedItemColor": {"type" :"string", "default":"black"},
|
||||
"selectedItemBorder": "string",
|
||||
"itemHoverBackground": {"type" :"string", "default":"gainsboro"},
|
||||
"itemHoverColor": {"type" :"string", "default":"black"},
|
||||
"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",
|
||||
"container": {
|
||||
"name": "Container",
|
||||
"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
|
||||
"props" : {
|
||||
"className":"string",
|
||||
"onLoad": "event"
|
||||
"onLoad": "event",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
"article",
|
||||
"aside",
|
||||
"details",
|
||||
"div",
|
||||
"firgure",
|
||||
"figcaption",
|
||||
"footer",
|
||||
"header",
|
||||
"main",
|
||||
"mark",
|
||||
"nav",
|
||||
"paragraph",
|
||||
"summary"
|
||||
],
|
||||
"default": "div"
|
||||
}
|
||||
},
|
||||
"container": true,
|
||||
"tags": ["div", "container", "layout"]
|
||||
},
|
||||
"h1": {
|
||||
"importPath": "h1",
|
||||
"name": "H1",
|
||||
"description": "An HTML H1 tag",
|
||||
"heading": {
|
||||
"name": "Heading",
|
||||
"description": "An HTML H1 - H6 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"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"
|
||||
"className":"string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"default": "h1",
|
||||
"options": ["h1","h2","h3","h4","h5","h6"]
|
||||
}
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,7 @@
|
|||
"devDependencies": {
|
||||
"@budibase/client": "^0.0.16",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"bcryptjs": "2.4.3",
|
||||
"fs-extra": "^8.1.0",
|
||||
"lodash": "^4.17.15",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
#current_component.svelte-uuhis1{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-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
|
||||
}.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}
|
||||
.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-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}
|
||||
#current_component.svelte-1u0yzf5{height:100%;width:100%}
|
||||
.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}
|
||||
.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)}
|
||||
.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}
|
||||
.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}
|
||||
|
||||
/*# sourceMappingURL=bundle.css.map */
|
||||
|
|
@ -3,18 +3,18 @@
|
|||
"file": "bundle.css",
|
||||
"sources": [
|
||||
"..\\src\\Test\\TestApp.svelte",
|
||||
"..\\src\\Nav.svelte",
|
||||
"..\\src\\Login.svelte",
|
||||
"..\\src\\Button.svelte",
|
||||
"..\\src\\Nav.svelte",
|
||||
"..\\src\\Table.svelte"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"<script>\r\nimport createApp from \"./createApp\";\r\nimport { props } from \"./props\";\r\n\r\nlet _bb;\r\n\r\nconst _appPromise = createApp();\r\n_appPromise.then(a => _bb = a);\r\n\r\nconst testProps = props.divWithAFewControls;\r\n\r\nlet currentComponent;\r\n\r\n$: {\r\n if(_bb && currentComponent) {\r\n _bb.hydrateChildren(testProps._children, currentComponent);\r\n }\r\n}\r\n\r\n\r\n\r\n</script>\r\n\r\n{#await _appPromise}\r\nloading\r\n{:then _bb}\r\n\r\n<div id=\"current_component\" bind:this={currentComponent}>\r\n</div>\r\n\r\n{/await}\r\n\r\n\r\n<style>\r\n#current_component {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n</style>\r\n\r\n",
|
||||
"<script>\r\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>\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\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\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 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\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>\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\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 export let columns = []\r\n export let data = \"\"\r\n export let tableClass = \"\"\r\n export let theadClass = \"\"\r\n export let tbodyClass = \"\"\r\n export let trClass = \"\"\r\n export let thClass = \"\"\r\n export let onRowClick\r\n\r\n export let _bb\r\n\r\n const rowClickHandler = row => () => {\r\n _bb.call(onRowClick, row)\r\n }\r\n\r\n const cellValue = (colIndex, row) => {\r\n const val = _bb.getStateOrValue(_bb.props.columns[colIndex].value, row)\r\n return val\r\n }\r\n</script>\r\n\r\n<table class={tableClass}>\r\n <thead class={theadClass}>\r\n <tr class={trClass}>\r\n {#each columns as col}\r\n <th class={thClass}>{col.title}</th>\r\n {/each}\r\n </tr>\r\n </thead>\r\n <tbody class={tbodyClass}>\r\n {#if data}\r\n {#each data as row}\r\n <tr class={trClass} on:click={rowClickHandler(row)}>\r\n {#each columns as col, index}\r\n <th class={thClass}>{cellValue(index, row)}</th>\r\n {/each}\r\n </tr>\r\n {/each}\r\n {/if}\r\n </tbody>\r\n</table>\r\n\r\n<style>\r\n .table-default {\r\n width: 100%;\r\n margin-bottom: 1rem;\r\n color: #212529;\r\n border-collapse: collapse;\r\n }\r\n\r\n .table-default .thead-default .th-default {\r\n vertical-align: bottom;\r\n border-bottom: 2px solid #dee2e6;\r\n font-weight: bold;\r\n }\r\n\r\n .table-default .th-default {\r\n padding: 0.75rem;\r\n vertical-align: top;\r\n border-top: 1px solid #dee2e6;\r\n font-weight: normal;\r\n }\r\n\r\n .th-default {\r\n text-align: inherit;\r\n }\r\n\r\n .table-default .tbody-default .tr-default:hover {\r\n color: #212529;\r\n background-color: rgba(0, 0, 0, 0.075);\r\n cursor: pointer;\r\n }\r\n</style>\r\n"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "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"
|
||||
"mappings": "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"
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -13,6 +13,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<script src='/bundle.js'></script>
|
||||
<script src='/bundle.js'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -73,6 +73,7 @@ const coreExternal = [
|
|||
"safe-buffer",
|
||||
"shortid",
|
||||
"@nx-js/compiler-util",
|
||||
"bcryptjs",
|
||||
]
|
||||
|
||||
export default {
|
||||
|
|
@ -82,6 +83,9 @@ export default {
|
|||
format: "iife",
|
||||
name: "app",
|
||||
file: "public/bundle.js",
|
||||
globals: {
|
||||
crypto: "crypto",
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
|
|
|
|||
49
packages/standard-components/src/Container.svelte
Normal file
49
packages/standard-components/src/Container.svelte
Normal 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}
|
||||
|
|
@ -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} />
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let _bb
|
||||
</script>
|
||||
|
||||
<h1 class={className}>{text}</h1>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let _bb
|
||||
</script>
|
||||
|
||||
<h1 class={className}>{text}</h1>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let _bb
|
||||
</script>
|
||||
|
||||
<h3 class={className}>{text}</h3>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let _bb
|
||||
</script>
|
||||
|
||||
<h4 class={className}>{text}</h4>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let _bb
|
||||
</script>
|
||||
|
||||
<h6 class={className}>{text}</h6>
|
||||
|
|
@ -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
24
packages/standard-components/src/Heading.svelte
Normal 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}
|
||||
|
|
@ -55,8 +55,7 @@
|
|||
const onSelectItem = index => () => {
|
||||
selectedIndex = index
|
||||
if (!components[index]) {
|
||||
const comp = _bb.hydrateChildren(
|
||||
_children[index].children,
|
||||
const comp = _bb.attachChildren(
|
||||
componentElements[index]
|
||||
)
|
||||
components[index] = comp
|
||||
|
|
|
|||
14
packages/standard-components/src/Option.svelte
Normal file
14
packages/standard-components/src/Option.svelte
Normal 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>
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
<script>
|
||||
export let value = ""
|
||||
export let className = ""
|
||||
export let type = "text"
|
||||
export let options = []
|
||||
|
||||
export let _bb
|
||||
|
||||
let actualValue = ""
|
||||
let selectElement;
|
||||
|
||||
$: selectElement && _bb.attachChildren(selectElement)
|
||||
|
||||
const onchange = ev => {
|
||||
if (_bb) {
|
||||
|
|
@ -15,9 +16,6 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<select class={className} {value} on:change={onchange}>
|
||||
<option />
|
||||
{#each options as opt}
|
||||
<option id={opt.id ? opt.id : opt.value}>{opt.value}</option>
|
||||
{/each}
|
||||
<select class={className} {value} on:change={onchange} bind:this={selectElement}>
|
||||
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,34 @@
|
|||
<script>
|
||||
import createApp from "./createApp"
|
||||
import { props } from "./props"
|
||||
|
||||
import { form } from "./props"
|
||||
let _bb
|
||||
|
||||
const _appPromise = createApp()
|
||||
_appPromise.then(a => (_bb = a))
|
||||
|
||||
const testProps = props.divWithAFewControls
|
||||
|
||||
let currentComponent
|
||||
let _appPromise
|
||||
|
||||
const autoAssignIds = (props, count = 0) => {
|
||||
if (!props._id) {
|
||||
props._id = `auto_id_${count}`
|
||||
}
|
||||
if (props._children) {
|
||||
for (let child of props._children) {
|
||||
count += 1
|
||||
autoAssignIds(child, count)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if (_bb && currentComponent) {
|
||||
_bb.hydrateChildren(testProps._children, currentComponent)
|
||||
if (currentComponent) {
|
||||
const _appPromise = createApp()
|
||||
const page = {
|
||||
props: form,
|
||||
}
|
||||
|
||||
autoAssignIds(page.props)
|
||||
|
||||
_appPromise.then(initialise => {
|
||||
initialise(page, currentComponent, "")
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -21,9 +36,7 @@
|
|||
{#await _appPromise}
|
||||
loading
|
||||
{:then _bb}
|
||||
|
||||
<div id="current_component" bind:this={currentComponent} />
|
||||
|
||||
{/await}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,25 @@
|
|||
import { writable } from "svelte/store"
|
||||
import Login from "../Login.svelte"
|
||||
import Input from "../Input.svelte"
|
||||
import Text from "../Text.svelte"
|
||||
import Nav from "../Nav.svelte"
|
||||
import H1 from "../H1.svelte"
|
||||
import Div from "../Div.svelte"
|
||||
import Table from "../Table.svelte"
|
||||
import Button from "../Button.svelte"
|
||||
import { createApp } from "@budibase/client/src/createApp"
|
||||
import components from "./testComponents"
|
||||
import packageJson from "../../package.json"
|
||||
import { rootComponent } from "./rootComponent"
|
||||
|
||||
export default async () => {
|
||||
const componentLibraries = {
|
||||
components: {
|
||||
login: Login,
|
||||
input: Input,
|
||||
text: Text,
|
||||
nav: Nav,
|
||||
table: Table,
|
||||
button: Button,
|
||||
div: Div,
|
||||
h1: H1,
|
||||
},
|
||||
delete components._lib
|
||||
const componentLibraries = {}
|
||||
componentLibraries[packageJson.name] = components
|
||||
componentLibraries["testcomponents"] = {
|
||||
rootComponent: rootComponent(window),
|
||||
}
|
||||
|
||||
const appDef = { hierarchy: {}, actions: {} }
|
||||
const user = { name: "yeo", permissions: [] }
|
||||
|
||||
var app = createApp(componentLibraries, appDef, user)
|
||||
app.store.update(s => {
|
||||
s.people = [
|
||||
{ name: "bob", address: "123 Main Street", status: "Open" },
|
||||
{ name: "poppy", address: "456 Side Road", status: "Closed" },
|
||||
{ name: "Oscar", address: "678 Dodgy Alley", status: "Open" },
|
||||
]
|
||||
return s
|
||||
})
|
||||
|
||||
return app
|
||||
const { initialisePage } = createApp(
|
||||
window.document,
|
||||
componentLibraries,
|
||||
{ appRootPath: "" },
|
||||
appDef,
|
||||
user,
|
||||
{},
|
||||
[]
|
||||
)
|
||||
return initialisePage
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,207 +1,59 @@
|
|||
export const props = {
|
||||
divWithAFewControls: {
|
||||
_component: "components/div",
|
||||
_children: [
|
||||
{
|
||||
_component: "components/h1",
|
||||
text: "This is an <h1> component",
|
||||
},
|
||||
{
|
||||
_component: "components/text",
|
||||
value: "Label for field",
|
||||
},
|
||||
{
|
||||
_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",
|
||||
export const form = {
|
||||
_id: "1",
|
||||
_component: "@budibase/standard-components/container",
|
||||
type: "main",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/heading",
|
||||
type: "h1",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
text: "This is an H1 Heading",
|
||||
},
|
||||
label: "First Name",
|
||||
},
|
||||
{
|
||||
control: {
|
||||
_component: "components/textbox",
|
||||
},
|
||||
label: "Last Name",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
nav: {
|
||||
_component: "components/nav",
|
||||
navBarBackground: "red",
|
||||
navBarBorder: "1px solid maroon",
|
||||
navBarColor: "black",
|
||||
selectedItemBackground: "maroon",
|
||||
selectedItemColor: "white",
|
||||
selectedItemBorder: "green",
|
||||
itemHoverBackground: "yellow",
|
||||
itemHoverColor: "pink",
|
||||
items: [
|
||||
{
|
||||
title: "People",
|
||||
component: {
|
||||
_component: "components/panel",
|
||||
text: "People Panel",
|
||||
padding: "40px",
|
||||
border: "2px solid pink",
|
||||
background: "mistyrose",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Animals",
|
||||
component: {
|
||||
_component: "components/panel",
|
||||
text: "Animals Panel",
|
||||
padding: "40px",
|
||||
border: "2px solid green",
|
||||
background: "azure",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
table: {
|
||||
_component: "components/table",
|
||||
columns: [
|
||||
{
|
||||
title: {
|
||||
"##bbstate": "NameColumnName",
|
||||
"##bbsource": "store",
|
||||
"##bbstatefallback": "Name",
|
||||
},
|
||||
value: {
|
||||
"##bbstate": "name",
|
||||
"##bbsource": "context",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
value: {
|
||||
"##bbstate": "address",
|
||||
"##bbsource": "context",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
value: {
|
||||
"##bbstate": "status",
|
||||
"##bbsource": "context",
|
||||
},
|
||||
},
|
||||
],
|
||||
data: {
|
||||
"##bbstate": "people",
|
||||
],
|
||||
},
|
||||
onRowClick: [
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "NameColumnName",
|
||||
value: {
|
||||
"##bbstate": "name",
|
||||
"##bbsource": "context",
|
||||
"##bbstatefallback": "balls to that",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
text: "This just some text",
|
||||
type: "strong",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/container",
|
||||
type: "paragraph",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
formattingTag: "<i>",
|
||||
text: "some iatlics in a paragraph",
|
||||
},
|
||||
},
|
||||
],
|
||||
tableClass: "table-default",
|
||||
theadClass: "thead-default",
|
||||
tbodyClass: "tbody-default",
|
||||
trClass: "tr-default",
|
||||
thClass: "th-default",
|
||||
},
|
||||
|
||||
hiddenNav: {
|
||||
_component: "components/stackpanel",
|
||||
children: [
|
||||
{
|
||||
control: {
|
||||
_component: "components/button",
|
||||
contentText: "Peep",
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "selected",
|
||||
value: "People",
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/heading",
|
||||
type: "h2",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
text: "This is an H2 Heading",
|
||||
},
|
||||
},
|
||||
{
|
||||
control: {
|
||||
_component: "components/button",
|
||||
contentText: "Ani",
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "selected",
|
||||
value: "Animals",
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/select",
|
||||
value: "two",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/option",
|
||||
text: "number 1",
|
||||
value: "one",
|
||||
},
|
||||
},
|
||||
{
|
||||
control: {
|
||||
_component: "components/nav",
|
||||
hideNavBar: true,
|
||||
selectedItem: {
|
||||
"##bbstate": "selected",
|
||||
"##bbsource": "store",
|
||||
"##bbstatefallback": "Animals",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
title: "People",
|
||||
component: {
|
||||
_component: "components/panel",
|
||||
text: "People Panel",
|
||||
padding: "40px",
|
||||
border: "2px solid pink",
|
||||
background: "mistyrose",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Animals",
|
||||
component: {
|
||||
_component: "components/panel",
|
||||
text: "Animals Panel",
|
||||
padding: "40px",
|
||||
border: "2px solid green",
|
||||
background: "azure",
|
||||
},
|
||||
},
|
||||
],
|
||||
{
|
||||
_component: "@budibase/standard-components/option",
|
||||
text: "number 2",
|
||||
value: "two",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
|||
15
packages/standard-components/src/Test/rootComponent.js
Normal file
15
packages/standard-components/src/Test/rootComponent.js
Normal 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
3
packages/standard-components/src/Test/testComponents.js
Normal 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 }
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
import { buildStyle } from "./buildStyle"
|
||||
|
||||
export let value = ""
|
||||
export let containerClass = ""
|
||||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let formattingTag = ""
|
||||
|
||||
export let font = ""
|
||||
export let textAlign = ""
|
||||
|
|
@ -13,6 +15,8 @@
|
|||
|
||||
let style = ""
|
||||
|
||||
const isTag = tag => (formattingTag || "").indexOf(tag) > -1
|
||||
|
||||
$: {
|
||||
style = buildStyle({
|
||||
font,
|
||||
|
|
@ -24,4 +28,30 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class={containerClass} {style}>{value}</div>
|
||||
{#if isTag("none")}
|
||||
{text}
|
||||
{:else if isTag("<b>")}
|
||||
<b class={className} {style}>{text}</b>
|
||||
{:else if isTag("<strong>")}
|
||||
<strong class={className} {style}>{text}</strong>
|
||||
{:else if isTag("<i>")}
|
||||
<i class={className} {style}>{text}</i>
|
||||
{:else if isTag("<em>")}
|
||||
<em class={className} {style}>{text}</em>
|
||||
{:else if isTag("<mark>")}
|
||||
<mark class={className} {style}>{text}</mark>
|
||||
{:else if isTag("<small>")}
|
||||
<small class={className} {style}>{text}</small>
|
||||
{:else if isTag("<del>")}
|
||||
<del class={className} {style}>{text}</del>
|
||||
{:else if isTag("<ins>")}
|
||||
<ins class={className} {style}>{text}</ins>
|
||||
{:else if isTag("<sub>")}
|
||||
<sub class={className} {style}>{text}</sub>
|
||||
{:else if isTag("<sup>")}
|
||||
<sup class={className} {style}>{text}</sup>
|
||||
{:else}
|
||||
{text}
|
||||
{/if}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
export let hoverColor
|
||||
export let hoverBackground
|
||||
export let hoverBorder
|
||||
export let _children
|
||||
|
||||
export let _bb
|
||||
let theButton
|
||||
|
|
@ -35,10 +34,7 @@
|
|||
return all
|
||||
}
|
||||
|
||||
$: {
|
||||
if (_bb && theButton && _children && _children.length)
|
||||
_bb.hydrateChildren(_children, theButton)
|
||||
}
|
||||
$: if(_bb.props._children.length > 0) theButton && _bb.attachChildren(theButton)
|
||||
|
||||
$: {
|
||||
cssVariables = {
|
||||
|
|
@ -77,7 +73,7 @@
|
|||
disabled={disabled || false}
|
||||
on:click={clickHandler}
|
||||
style={buttonStyles}>
|
||||
{#if !_children || _children.length === 0}{contentText}{/if}
|
||||
{#if _bb.props_children.length === 0}{contentText}{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
export { default as button } from "./Button.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 container } from "./Container.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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue