mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
131 changed files with 33071 additions and 23512 deletions
@ -0,0 +1,5 @@ |
|||
packages/builder/src/userInterface/CurrentItemPreview.svelte |
|||
public |
|||
dist |
|||
packages/server/builder |
|||
**/*.spec.js |
|||
@ -1,27 +1,28 @@ |
|||
/** |
|||
* buildStateOrigins |
|||
* |
|||
* Builds an object that details all the bound state in the application, and what updates it. |
|||
* |
|||
* @param screenDefinition - the screen definition metadata. |
|||
* @returns {Object} an object with the client state values and how they are managed. |
|||
*/ |
|||
export const buildStateOrigins = screenDefinition => { |
|||
const origins = {}; |
|||
/** |
|||
* buildStateOrigins |
|||
* |
|||
* Builds an object that details all the bound state in the application, and what updates it. |
|||
* |
|||
* @param screenDefinition - the screen definition metadata. |
|||
* @returns {Object} an object with the client state values and how they are managed. |
|||
*/ |
|||
export const buildStateOrigins = screenDefinition => { |
|||
const origins = {} |
|||
|
|||
function traverse(propValue) { |
|||
for (let key in propValue) { |
|||
if (!Array.isArray(propValue[key])) continue; |
|||
function traverse(propValue) { |
|||
for (let key in propValue) { |
|||
if (!Array.isArray(propValue[key])) continue |
|||
|
|||
if (key === "_children") propValue[key].forEach(traverse); |
|||
if (key === "_children") propValue[key].forEach(traverse) |
|||
|
|||
for (let element of propValue[key]) { |
|||
if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element; |
|||
} |
|||
for (let element of propValue[key]) { |
|||
if (element["##eventHandlerType"] === "Set State") |
|||
origins[element.parameters.path] = element |
|||
} |
|||
} |
|||
} |
|||
|
|||
traverse(screenDefinition.props); |
|||
traverse(screenDefinition.props) |
|||
|
|||
return origins; |
|||
}; |
|||
return origins |
|||
} |
|||
|
|||
@ -1 +1 @@ |
|||
export { default } from "./PropertyCascader.svelte" |
|||
export { default } from "./PropertyCascader.svelte" |
|||
|
|||
@ -1,30 +1,32 @@ |
|||
import { buildStateOrigins } from "../src/builderStore/buildStateOrigins"; |
|||
import { buildStateOrigins } from "../src/builderStore/buildStateOrigins" |
|||
|
|||
it("builds the correct stateOrigins object from a screen definition with handlers", () => { |
|||
expect(buildStateOrigins({ |
|||
"name": "screen1", |
|||
"description": "", |
|||
"props": { |
|||
"_component": "@budibase/standard-components/container", |
|||
"className": "", |
|||
"type": "div", |
|||
"onClick": [ |
|||
{ |
|||
"##eventHandlerType": "Set State", |
|||
"parameters": { |
|||
"path": "testKey", |
|||
"value": "value" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
})).toEqual({ |
|||
"testKey": { |
|||
expect( |
|||
buildStateOrigins({ |
|||
name: "screen1", |
|||
description: "", |
|||
props: { |
|||
_component: "@budibase/standard-components/container", |
|||
className: "", |
|||
type: "div", |
|||
onClick: [ |
|||
{ |
|||
"##eventHandlerType": "Set State", |
|||
parameters: { |
|||
path: "testKey", |
|||
value: "value", |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}) |
|||
).toEqual({ |
|||
testKey: { |
|||
"##eventHandlerType": "Set State", |
|||
"parameters": { |
|||
"path": "testKey", |
|||
"value": "value" |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
parameters: { |
|||
path: "testKey", |
|||
value: "value", |
|||
}, |
|||
}, |
|||
}) |
|||
}) |
|||
|
|||
@ -1 +1 @@ |
|||
module.exports = config => ({}) |
|||
module.exports = () => ({}) |
|||
|
|||
@ -1,4 +1,3 @@ |
|||
import "./_style.scss"; |
|||
export { default as Checkbox } from "./Checkbox.svelte"; |
|||
export { default as Checkboxgroup } from "./CheckboxGroup.svelte"; |
|||
|
|||
import "./_style.scss" |
|||
export { default as Checkbox } from "./Checkbox.svelte" |
|||
export { default as Checkboxgroup } from "./CheckboxGroup.svelte" |
|||
|
|||
@ -1,19 +1,19 @@ |
|||
import { writable } from "svelte/store"; |
|||
import { writable } from "svelte/store" |
|||
|
|||
function store() { |
|||
const { set, update, subscribe } = writable({}); |
|||
const { set, update, subscribe } = writable({}) |
|||
|
|||
function setInput(inp) { |
|||
update(n => { |
|||
n.input = inp; |
|||
}); |
|||
n.input = inp |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
subscribe, |
|||
set, |
|||
setInput |
|||
}; |
|||
setInput, |
|||
} |
|||
} |
|||
|
|||
export const fieldStore = store(); |
|||
export const fieldStore = store() |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
<script> |
|||
import { getContext } from "svelte"; |
|||
import { getContext } from "svelte" |
|||
|
|||
export let icon = ""; |
|||
export let icon = "" |
|||
|
|||
let iconContext = getContext("BBMD:icon:context"); |
|||
let iconContext = getContext("BBMD:icon:context") |
|||
let cls = iconContext |
|||
? `material-icons mdc-${iconContext}__icon` |
|||
: "material-icons"; |
|||
: "material-icons" |
|||
</script> |
|||
|
|||
<i class={cls}>{icon}</i> |
|||
|
|||
@ -1,14 +1,13 @@ |
|||
<script> |
|||
import { getContext } from "svelte" |
|||
import { getContext } from "svelte" |
|||
|
|||
export let _bb |
|||
export let _bb |
|||
|
|||
const cb = _bb.getContext("BBMD:data-table:cb") |
|||
const cb = _bb.getContext("BBMD:data-table:cb") |
|||
|
|||
let tbody |
|||
|
|||
$: tbody && _bb.attachChildren(tbody) |
|||
let tbody |
|||
|
|||
$: tbody && _bb.attachChildren(tbody) |
|||
</script> |
|||
|
|||
<tbody bind:this={tbody} class={cb.elem`content`}></tbody> |
|||
<tbody bind:this={tbody} class={cb.elem`content`} /> |
|||
|
|||
@ -1,13 +1,11 @@ |
|||
<script> |
|||
export let _bb |
|||
|
|||
export let _bb |
|||
const cb = _bb.getContext("BBMD:data-table:cb") |
|||
|
|||
const cb = _bb.getContext("BBMD:data-table:cb") |
|||
|
|||
let thead |
|||
|
|||
$: thead && _bb.attachChildren(thead) |
|||
let thead |
|||
|
|||
$: thead && _bb.attachChildren(thead) |
|||
</script> |
|||
|
|||
<thead bind:this={thead} class=className></thead> |
|||
<thead bind:this={thead} class="className" /> |
|||
|
|||
@ -1,79 +1,71 @@ |
|||
<script> |
|||
import { onMount, getContext } from "svelte"; |
|||
import { MDCList } from "@material/list"; |
|||
import { MDCRipple } from "@material/ripple"; |
|||
import ListItem from "./ListItem.svelte"; |
|||
import ClassBuilder from "../ClassBuilder.js"; |
|||
import { onMount, getContext } from "svelte" |
|||
import { MDCList } from "@material/list" |
|||
import { MDCRipple } from "@material/ripple" |
|||
import ListItem from "./ListItem.svelte" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
const cb = new ClassBuilder("list", ["one-line"]); |
|||
export let _bb |
|||
const cb = new ClassBuilder("list", ["one-line"]) |
|||
|
|||
let list = null; |
|||
let instance = null; |
|||
let list = null |
|||
let instance = null |
|||
|
|||
export let onSelect = selectedItems => {}; |
|||
export let onSelect = selectedItems => {} |
|||
|
|||
export let variant = "one-line"; |
|||
export let variant = "one-line" |
|||
//items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n] |
|||
export let items = []; |
|||
export let singleSelection = false; |
|||
export let inputElement = null; |
|||
export let items = [] |
|||
export let singleSelection = false |
|||
export let inputElement = null |
|||
|
|||
let role = "listbox"; |
|||
let role = "listbox" |
|||
|
|||
onMount(() => { |
|||
if (!!list) { |
|||
instance = new MDCList(list); |
|||
instance.singleSelection = singleSelection; |
|||
instance.listElements.map(element => new MDCRipple(element)); |
|||
instance = new MDCList(list) |
|||
instance.singleSelection = singleSelection |
|||
instance.listElements.map(element => new MDCRipple(element)) |
|||
} |
|||
|
|||
let context = getContext("BBMD:list:context"); |
|||
let context = getContext("BBMD:list:context") |
|||
if (context === "menu") { |
|||
role = "menu"; |
|||
role = "menu" |
|||
} |
|||
|
|||
return () => { |
|||
instance && instance.destroy(); |
|||
instance = null; |
|||
}; |
|||
}); |
|||
instance && instance.destroy() |
|||
instance = null |
|||
} |
|||
}) |
|||
|
|||
function handleSelectedItem(item) { |
|||
if (!item.disabled) { |
|||
if (singleSelection || inputElement === "radiobutton") { |
|||
items.forEach(i => { |
|||
if (i.selected) i.selected = false; |
|||
}); |
|||
if (i.selected) i.selected = false |
|||
}) |
|||
} |
|||
|
|||
let idx = items.indexOf(item); |
|||
let idx = items.indexOf(item) |
|||
if (!!item.selected) { |
|||
items[idx].selected = !item.selected; |
|||
items[idx].selected = !item.selected |
|||
} else { |
|||
items[idx].selected = true; |
|||
items[idx].selected = true |
|||
} |
|||
onSelect(items.filter(item => item.selected)); |
|||
onSelect(items.filter(item => item.selected)) |
|||
} |
|||
} |
|||
|
|||
$: useDoubleLine = |
|||
variant == "two-line" && |
|||
items.every(i => typeof i.text == "object" && "primary" in i.text); |
|||
items.every(i => typeof i.text == "object" && "primary" in i.text) |
|||
|
|||
$: list && _bb.attachChildren(list) |
|||
|
|||
$: modifiers = { variant }; |
|||
$: props = { modifiers }; |
|||
$: listClass = cb.build({ props }); |
|||
$: modifiers = { variant } |
|||
$: props = { modifiers } |
|||
$: listClass = cb.build({ props }) |
|||
</script> |
|||
|
|||
<ul class={listClass} {role}> |
|||
{#each items as item, i} |
|||
<ListItem |
|||
{item} |
|||
{useDoubleLine} |
|||
{inputElement} |
|||
onClick={() => handleSelectedItem(item)} /> |
|||
{#if item.divider} |
|||
<li role="separator" class="mdc-list-divider" /> |
|||
{/if} |
|||
{/each} |
|||
</ul> |
|||
<ul bind:this={list} class={listClass} {role} /> |
|||
|
|||
@ -1,71 +1,73 @@ |
|||
<script> |
|||
import { onMount, getContext } from "svelte"; |
|||
import { Radiobutton } from "../Radiobutton"; |
|||
import { Checkbox } from "../Checkbox"; |
|||
import ClassBuilder from "../ClassBuilder.js"; |
|||
import { onMount, getContext } from "svelte" |
|||
import { Radiobutton } from "../Radiobutton" |
|||
import { Checkbox } from "../Checkbox" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
const cb = new ClassBuilder("list-item"); |
|||
const cb = new ClassBuilder("list-item") |
|||
|
|||
export let onClick = item => {}; |
|||
export let onClick = item => {} |
|||
|
|||
export let item = null; |
|||
export let useDoubleLine = false; |
|||
export let inputElement = null; //radiobutton or checkbox |
|||
export let text = "" |
|||
export let secondaryText = "" |
|||
export let variant = "two-line" |
|||
export let inputElement = null |
|||
export let leadingIcon = "" |
|||
export let trailingIcon = "" |
|||
export let selected = false |
|||
export let disabled = false |
|||
|
|||
let role = "option"; |
|||
let role = "option" |
|||
|
|||
onMount(() => { |
|||
let context = getContext("BBMD:list:context"); |
|||
let context = getContext("BBMD:list:context") |
|||
if (context === "menu") { |
|||
role = "menuitem"; |
|||
role = "menuitem" |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
$: if (!!inputElement) { |
|||
setContext("BBMD:input:context", "list-item"); |
|||
setContext("BBMD:input:context", "list-item") |
|||
} |
|||
|
|||
$: modifiers = { |
|||
selected: !inputElement ? item.selected : null, |
|||
disabled: item.disabled |
|||
}; |
|||
$: props = { modifiers }; |
|||
$: listItemClass = cb.build({ props }); |
|||
selected, |
|||
disabled, |
|||
} |
|||
$: props = { modifiers } |
|||
$: listItemClass = cb.build({ props }) |
|||
|
|||
$: useSecondaryText = |
|||
typeof item.text === "object" && "secondary" in item.text; |
|||
$: useTwoLine = variant === "two-line" && !!secondaryText |
|||
</script> |
|||
|
|||
<li |
|||
class={listItemClass} |
|||
role="option" |
|||
aria-selected={item.selected} |
|||
aria-selected={selected} |
|||
tabindex="0" |
|||
on:click={onClick}> |
|||
{#if item.leadingIcon} |
|||
{#if leadingIcon} |
|||
<span class="mdc-list-item__graphic material-icons" aria-hidden="true"> |
|||
{item.leadingIcon} |
|||
{leadingIcon} |
|||
</span> |
|||
{/if} |
|||
<span class={cb.elem`text`}> |
|||
{#if useDoubleLine} |
|||
<span class={cb.elem`primary-text`}>{item.text.primary}</span> |
|||
{#if useSecondaryText} |
|||
<span class={cb.elem`secondary-text`}>{item.text.secondary}</span> |
|||
{/if} |
|||
{:else}{item.text}{/if} |
|||
{#if useTwoLine} |
|||
<span class={cb.elem`primary-text`}>{text}</span> |
|||
<span class={cb.elem`secondary-text`}>{secondaryText}</span> |
|||
{:else}{text}{/if} |
|||
</span> |
|||
|
|||
{#if inputElement} |
|||
{#if inputElement === 'radiobutton'} |
|||
<Radiobutton checked={item.selected} disabled={item.disabled} /> |
|||
<Radiobutton checked={selected} {disabled} /> |
|||
{:else if inputElement === 'checkbox'} |
|||
<Checkbox checked={item.selected} disabled={item.disabled} /> |
|||
<Checkbox checked={selected} {disabled} /> |
|||
{/if} |
|||
{:else if item.trailingIcon} |
|||
{:else if trailingIcon} |
|||
<!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient --> |
|||
<span class="mdc-list-item__meta material-icons" aria-hidden="true"> |
|||
{item.trailingIcon} |
|||
{trailingIcon} |
|||
</span> |
|||
{/if} |
|||
</li> |
|||
|
|||
@ -1,2 +1,3 @@ |
|||
import "./_style.scss"; |
|||
export { default as List } from "./List.svelte"; |
|||
import "./_style.scss" |
|||
export { default as List } from "./List.svelte" |
|||
export { default as ListItem } from "./ListItem.svelte" |
|||
|
|||
@ -1,2 +1,2 @@ |
|||
import "./_styles.scss"; |
|||
export { default as Menu } from "./Menu.svelte"; |
|||
import "./_styles.scss" |
|||
export { default as Menu } from "./Menu.svelte" |
|||
|
|||
@ -1,3 +1,3 @@ |
|||
import "./_style.scss"; |
|||
export { default as Radiobutton } from "./Radiobutton.svelte"; |
|||
export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte"; |
|||
import "./_style.scss" |
|||
export { default as Radiobutton } from "./Radiobutton.svelte" |
|||
export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte" |
|||
|
|||
@ -1,2 +1,2 @@ |
|||
import "./_index.scss" |
|||
export { default as Textfield } from "./Textfield.svelte" |
|||
export { default as Textfield } from "./Textfield.svelte" |
|||
|
|||
@ -1,13 +1,13 @@ |
|||
import "./_style.scss"; |
|||
export { default as Body1 } from "./Body1.svelte"; |
|||
export { default as Body2 } from "./Body2.svelte"; |
|||
export { default as Caption } from "./Caption.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 Overline } from "./Overline.svelte"; |
|||
export { default as Sub1 } from "./Sub1.svelte"; |
|||
export { default as Sub2 } from "./Sub2.svelte"; |
|||
import "./_style.scss" |
|||
export { default as Body1 } from "./Body1.svelte" |
|||
export { default as Body2 } from "./Body2.svelte" |
|||
export { default as Caption } from "./Caption.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 Overline } from "./Overline.svelte" |
|||
export { default as Sub1 } from "./Sub1.svelte" |
|||
export { default as Sub2 } from "./Sub2.svelte" |
|||
|
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -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/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_DEFINITION##'] = {"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","type":"div"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/container","className":"","type":"div"},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/container","className":"","type":"div"},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]}; |
|||
window['##BUDIBASE_FRONTEND_FUNCTIONS##'] = {'1234':() => 'test return'} |
|||
@ -1 +1 @@ |
|||
module.exports = config => ({}) |
|||
module.exports = () => ({}) |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue