forked from tsai/budibase
Michael Shanks
7 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 |
* buildStateOrigins |
||||
* |
* |
||||
* Builds an object that details all the bound state in the application, and what updates it. |
* Builds an object that details all the bound state in the application, and what updates it. |
||||
* |
* |
||||
* @param screenDefinition - the screen definition metadata. |
* @param screenDefinition - the screen definition metadata. |
||||
* @returns {Object} an object with the client state values and how they are managed. |
* @returns {Object} an object with the client state values and how they are managed. |
||||
*/ |
*/ |
||||
export const buildStateOrigins = screenDefinition => { |
export const buildStateOrigins = screenDefinition => { |
||||
const origins = {}; |
const origins = {} |
||||
|
|
||||
function traverse(propValue) { |
function traverse(propValue) { |
||||
for (let key in propValue) { |
for (let key in propValue) { |
||||
if (!Array.isArray(propValue[key])) continue; |
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]) { |
for (let element of propValue[key]) { |
||||
if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element; |
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", () => { |
it("builds the correct stateOrigins object from a screen definition with handlers", () => { |
||||
expect(buildStateOrigins({ |
expect( |
||||
"name": "screen1", |
buildStateOrigins({ |
||||
"description": "", |
name: "screen1", |
||||
"props": { |
description: "", |
||||
"_component": "@budibase/standard-components/container", |
props: { |
||||
"className": "", |
_component: "@budibase/standard-components/container", |
||||
"type": "div", |
className: "", |
||||
"onClick": [ |
type: "div", |
||||
{ |
onClick: [ |
||||
"##eventHandlerType": "Set State", |
{ |
||||
"parameters": { |
"##eventHandlerType": "Set State", |
||||
"path": "testKey", |
parameters: { |
||||
"value": "value" |
path: "testKey", |
||||
} |
value: "value", |
||||
} |
}, |
||||
] |
}, |
||||
} |
], |
||||
})).toEqual({ |
}, |
||||
"testKey": { |
}) |
||||
|
).toEqual({ |
||||
|
testKey: { |
||||
"##eventHandlerType": "Set State", |
"##eventHandlerType": "Set State", |
||||
"parameters": { |
parameters: { |
||||
"path": "testKey", |
path: "testKey", |
||||
"value": "value" |
value: "value", |
||||
} |
}, |
||||
} |
}, |
||||
}); |
}) |
||||
}); |
}) |
||||
|
|||||
@ -1 +1 @@ |
|||||
module.exports = config => ({}) |
module.exports = () => ({}) |
||||
|
|||||
@ -1,4 +1,3 @@ |
|||||
import "./_style.scss"; |
import "./_style.scss" |
||||
export { default as Checkbox } from "./Checkbox.svelte"; |
export { default as Checkbox } from "./Checkbox.svelte" |
||||
export { default as Checkboxgroup } from "./CheckboxGroup.svelte"; |
export { default as Checkboxgroup } from "./CheckboxGroup.svelte" |
||||
|
|
||||
|
|||||
@ -1,19 +1,19 @@ |
|||||
import { writable } from "svelte/store"; |
import { writable } from "svelte/store" |
||||
|
|
||||
function store() { |
function store() { |
||||
const { set, update, subscribe } = writable({}); |
const { set, update, subscribe } = writable({}) |
||||
|
|
||||
function setInput(inp) { |
function setInput(inp) { |
||||
update(n => { |
update(n => { |
||||
n.input = inp; |
n.input = inp |
||||
}); |
}) |
||||
} |
} |
||||
|
|
||||
return { |
return { |
||||
subscribe, |
subscribe, |
||||
set, |
set, |
||||
setInput |
setInput, |
||||
}; |
} |
||||
} |
} |
||||
|
|
||||
export const fieldStore = store(); |
export const fieldStore = store() |
||||
|
|||||
@ -1,12 +1,12 @@ |
|||||
<script> |
<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 |
let cls = iconContext |
||||
? `material-icons mdc-${iconContext}__icon` |
? `material-icons mdc-${iconContext}__icon` |
||||
: "material-icons"; |
: "material-icons" |
||||
</script> |
</script> |
||||
|
|
||||
<i class={cls}>{icon}</i> |
<i class={cls}>{icon}</i> |
||||
|
|||||
@ -1,14 +1,13 @@ |
|||||
<script> |
<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 |
let tbody |
||||
|
|
||||
$: tbody && _bb.attachChildren(tbody) |
|
||||
|
|
||||
|
$: tbody && _bb.attachChildren(tbody) |
||||
</script> |
</script> |
||||
|
|
||||
<tbody bind:this={tbody} class={cb.elem`content`}></tbody> |
<tbody bind:this={tbody} class={cb.elem`content`} /> |
||||
|
|||||
@ -1,13 +1,11 @@ |
|||||
<script> |
<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 |
||||
|
|
||||
let thead |
|
||||
|
|
||||
$: thead && _bb.attachChildren(thead) |
|
||||
|
|
||||
|
$: thead && _bb.attachChildren(thead) |
||||
</script> |
</script> |
||||
|
|
||||
<thead bind:this={thead} class=className></thead> |
<thead bind:this={thead} class="className" /> |
||||
|
|||||
@ -1,79 +1,71 @@ |
|||||
<script> |
<script> |
||||
import { onMount, getContext } from "svelte"; |
import { onMount, getContext } from "svelte" |
||||
import { MDCList } from "@material/list"; |
import { MDCList } from "@material/list" |
||||
import { MDCRipple } from "@material/ripple"; |
import { MDCRipple } from "@material/ripple" |
||||
import ListItem from "./ListItem.svelte"; |
import ListItem from "./ListItem.svelte" |
||||
import ClassBuilder from "../ClassBuilder.js"; |
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 list = null |
||||
let instance = 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] |
//items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n] |
||||
export let items = []; |
export let items = [] |
||||
export let singleSelection = false; |
export let singleSelection = false |
||||
export let inputElement = null; |
export let inputElement = null |
||||
|
|
||||
let role = "listbox"; |
let role = "listbox" |
||||
|
|
||||
onMount(() => { |
onMount(() => { |
||||
if (!!list) { |
if (!!list) { |
||||
instance = new MDCList(list); |
instance = new MDCList(list) |
||||
instance.singleSelection = singleSelection; |
instance.singleSelection = singleSelection |
||||
instance.listElements.map(element => new MDCRipple(element)); |
instance.listElements.map(element => new MDCRipple(element)) |
||||
} |
} |
||||
|
|
||||
let context = getContext("BBMD:list:context"); |
let context = getContext("BBMD:list:context") |
||||
if (context === "menu") { |
if (context === "menu") { |
||||
role = "menu"; |
role = "menu" |
||||
} |
} |
||||
|
|
||||
return () => { |
return () => { |
||||
instance && instance.destroy(); |
instance && instance.destroy() |
||||
instance = null; |
instance = null |
||||
}; |
} |
||||
}); |
}) |
||||
|
|
||||
function handleSelectedItem(item) { |
function handleSelectedItem(item) { |
||||
if (!item.disabled) { |
if (!item.disabled) { |
||||
if (singleSelection || inputElement === "radiobutton") { |
if (singleSelection || inputElement === "radiobutton") { |
||||
items.forEach(i => { |
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) { |
if (!!item.selected) { |
||||
items[idx].selected = !item.selected; |
items[idx].selected = !item.selected |
||||
} else { |
} else { |
||||
items[idx].selected = true; |
items[idx].selected = true |
||||
} |
} |
||||
onSelect(items.filter(item => item.selected)); |
onSelect(items.filter(item => item.selected)) |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
$: useDoubleLine = |
$: useDoubleLine = |
||||
variant == "two-line" && |
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 }; |
$: modifiers = { variant } |
||||
$: props = { modifiers }; |
$: props = { modifiers } |
||||
$: listClass = cb.build({ props }); |
$: listClass = cb.build({ props }) |
||||
</script> |
</script> |
||||
|
|
||||
<ul class={listClass} {role}> |
<ul bind:this={list} 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> |
|
||||
|
|||||
@ -1,71 +1,73 @@ |
|||||
<script> |
<script> |
||||
import { onMount, getContext } from "svelte"; |
import { onMount, getContext } from "svelte" |
||||
import { Radiobutton } from "../Radiobutton"; |
import { Radiobutton } from "../Radiobutton" |
||||
import { Checkbox } from "../Checkbox"; |
import { Checkbox } from "../Checkbox" |
||||
import ClassBuilder from "../ClassBuilder.js"; |
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 text = "" |
||||
export let useDoubleLine = false; |
export let secondaryText = "" |
||||
export let inputElement = null; //radiobutton or checkbox |
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(() => { |
onMount(() => { |
||||
let context = getContext("BBMD:list:context"); |
let context = getContext("BBMD:list:context") |
||||
if (context === "menu") { |
if (context === "menu") { |
||||
role = "menuitem"; |
role = "menuitem" |
||||
} |
} |
||||
}); |
}) |
||||
|
|
||||
$: if (!!inputElement) { |
$: if (!!inputElement) { |
||||
setContext("BBMD:input:context", "list-item"); |
setContext("BBMD:input:context", "list-item") |
||||
} |
} |
||||
|
|
||||
$: modifiers = { |
$: modifiers = { |
||||
selected: !inputElement ? item.selected : null, |
selected, |
||||
disabled: item.disabled |
disabled, |
||||
}; |
} |
||||
$: props = { modifiers }; |
$: props = { modifiers } |
||||
$: listItemClass = cb.build({ props }); |
$: listItemClass = cb.build({ props }) |
||||
|
|
||||
$: useSecondaryText = |
$: useTwoLine = variant === "two-line" && !!secondaryText |
||||
typeof item.text === "object" && "secondary" in item.text; |
|
||||
</script> |
</script> |
||||
|
|
||||
<li |
<li |
||||
class={listItemClass} |
class={listItemClass} |
||||
role="option" |
role="option" |
||||
aria-selected={item.selected} |
aria-selected={selected} |
||||
tabindex="0" |
tabindex="0" |
||||
on:click={onClick}> |
on:click={onClick}> |
||||
{#if item.leadingIcon} |
{#if leadingIcon} |
||||
<span class="mdc-list-item__graphic material-icons" aria-hidden="true"> |
<span class="mdc-list-item__graphic material-icons" aria-hidden="true"> |
||||
{item.leadingIcon} |
{leadingIcon} |
||||
</span> |
</span> |
||||
{/if} |
{/if} |
||||
<span class={cb.elem`text`}> |
<span class={cb.elem`text`}> |
||||
{#if useDoubleLine} |
{#if useTwoLine} |
||||
<span class={cb.elem`primary-text`}>{item.text.primary}</span> |
<span class={cb.elem`primary-text`}>{text}</span> |
||||
{#if useSecondaryText} |
<span class={cb.elem`secondary-text`}>{secondaryText}</span> |
||||
<span class={cb.elem`secondary-text`}>{item.text.secondary}</span> |
{:else}{text}{/if} |
||||
{/if} |
|
||||
{:else}{item.text}{/if} |
|
||||
</span> |
</span> |
||||
|
|
||||
{#if inputElement} |
{#if inputElement} |
||||
{#if inputElement === 'radiobutton'} |
{#if inputElement === 'radiobutton'} |
||||
<Radiobutton checked={item.selected} disabled={item.disabled} /> |
<Radiobutton checked={selected} {disabled} /> |
||||
{:else if inputElement === 'checkbox'} |
{:else if inputElement === 'checkbox'} |
||||
<Checkbox checked={item.selected} disabled={item.disabled} /> |
<Checkbox checked={selected} {disabled} /> |
||||
{/if} |
{/if} |
||||
{:else if item.trailingIcon} |
{:else if trailingIcon} |
||||
<!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient --> |
<!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient --> |
||||
<span class="mdc-list-item__meta material-icons" aria-hidden="true"> |
<span class="mdc-list-item__meta material-icons" aria-hidden="true"> |
||||
{item.trailingIcon} |
{trailingIcon} |
||||
</span> |
</span> |
||||
{/if} |
{/if} |
||||
</li> |
</li> |
||||
|
|||||
@ -1,2 +1,3 @@ |
|||||
import "./_style.scss"; |
import "./_style.scss" |
||||
export { default as List } from "./List.svelte"; |
export { default as List } from "./List.svelte" |
||||
|
export { default as ListItem } from "./ListItem.svelte" |
||||
|
|||||
@ -1,2 +1,2 @@ |
|||||
import "./_styles.scss"; |
import "./_styles.scss" |
||||
export { default as Menu } from "./Menu.svelte"; |
export { default as Menu } from "./Menu.svelte" |
||||
|
|||||
@ -1,3 +1,3 @@ |
|||||
import "./_style.scss"; |
import "./_style.scss" |
||||
export { default as Radiobutton } from "./Radiobutton.svelte"; |
export { default as Radiobutton } from "./Radiobutton.svelte" |
||||
export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte"; |
export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte" |
||||
|
|||||
@ -1,2 +1,2 @@ |
|||||
import "./_index.scss" |
import "./_index.scss" |
||||
export { default as Textfield } from "./Textfield.svelte" |
export { default as Textfield } from "./Textfield.svelte" |
||||
|
|||||
@ -1,13 +1,13 @@ |
|||||
import "./_style.scss"; |
import "./_style.scss" |
||||
export { default as Body1 } from "./Body1.svelte"; |
export { default as Body1 } from "./Body1.svelte" |
||||
export { default as Body2 } from "./Body2.svelte"; |
export { default as Body2 } from "./Body2.svelte" |
||||
export { default as Caption } from "./Caption.svelte"; |
export { default as Caption } from "./Caption.svelte" |
||||
export { default as H1 } from "./H1.svelte"; |
export { default as H1 } from "./H1.svelte" |
||||
export { default as H2 } from "./H2.svelte"; |
export { default as H2 } from "./H2.svelte" |
||||
export { default as H3 } from "./H3.svelte"; |
export { default as H3 } from "./H3.svelte" |
||||
export { default as H4 } from "./H4.svelte"; |
export { default as H4 } from "./H4.svelte" |
||||
export { default as H5 } from "./H5.svelte"; |
export { default as H5 } from "./H5.svelte" |
||||
export { default as H6 } from "./H6.svelte"; |
export { default as H6 } from "./H6.svelte" |
||||
export { default as Overline } from "./Overline.svelte"; |
export { default as Overline } from "./Overline.svelte" |
||||
export { default as Sub1 } from "./Sub1.svelte"; |
export { default as Sub1 } from "./Sub1.svelte" |
||||
export { default as Sub2 } from "./Sub2.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'} |
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