CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'component-sdk' of github.com:Budibase/budibase into feature/page-refactor

Browse source
This commit is contained in:
mike12345567 2020-11-25 15:04:23 +00:00
parent e1314b0d88 1e857f101a
commit 7384f9238d
50 changed files with 461 additions and 337 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -3,57 +3,17 @@
import { store } from "builderStore"
import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
import { Component } from "builderStore/store/screenTemplates/utils/Component"
let iframe
// Styles for screenslot placeholder
const headingStyle = {
width: "500px",
padding: "8px",
}
const textStyle = {
...headingStyle,
"max-width": "",
"text-align": "left",
}
const heading = new Component("@budibase/standard-components/heading")
.normalStyle(headingStyle)
.type("h1")
.text("Screen Slot")
.instanceName("Heading")
const textScreenDisplay = new Component("@budibase/standard-components/text")
.normalStyle(textStyle)
.instanceName("Text")
.type("none")
.text(
"The screens that you create will be displayed inside this box. This box is just a placeholder, to show you the position of screens."
)
const container = new Component("@budibase/standard-components/container")
.normalStyle({
display: "flex",
"flex-direction": "column",
"align-items": "center",
flex: "1 1 auto",
})
.type("div")
.instanceName("Container")
.addChild(heading)
.addChild(textScreenDisplay)
// Create screen slot placeholder for use when a page is selected rather
// than a screen
const screenPlaceholder = new Screen()
.name("Screen Placeholder")
.route("*")
.component("@budibase/standard-components/container")
.mainType("div")
.component("@budibase/standard-components/screenslotplaceholder")
.instanceName("Content Placeholder")
.normalStyle({
flex: "1 1 auto",
})
.addChild(container)
.json()
// TODO: this ID is attached to how the screen slot is rendered, confusing, would be better a type etc
screenPlaceholder.props._id = "screenslot-placeholder"
// Extract data to pass to the iframe
$: page = $store.layouts[$store.currentPageName]
@ -75,7 +35,7 @@
}
}
// Refrech the preview when required
// Refresh the preview when required
$: refreshContent(previewData)
// Initialise the app when mounted

20
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View file

@ -4,29 +4,13 @@ export default `<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
<style>
body, html {
height: 100%!important;
height: 100% !important;
font-family: Inter !important;
margin: 0px!important;
margin: 0px !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
[data-bb-id="screenslot-placeholder"] {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
border-style: dashed !important;
border-width: 1px;
color: #000000;
background-color: rgba(0, 0, 0, 0.05);
flex: 1 1 auto;
}
[data-bb-id="screenslot-placeholder"] span {
display: block;
margin-bottom: 10px;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>

17
packages/builder/src/components/userInterface/TableViewSelect.svelte
View file

@ -40,13 +40,16 @@
$: links = bindableProperties
.filter(x => x.fieldSchema?.type === "link")
.map(property => ({
label: property.readableBinding,
fieldName: property.fieldSchema.name,
name: `all_${property.fieldSchema.tableId}`,
tableId: property.fieldSchema.tableId,
type: "link",
}))
.map(property => {
return {
providerId: property.instance._id,
label: property.readableBinding,
fieldName: property.fieldSchema.name,
name: `all_${property.fieldSchema.tableId}`,
tableId: property.fieldSchema.tableId,
type: "link",
}
})
</script>
<div

2
packages/client/src/api/api.js
View file

@ -1,4 +1,4 @@
import { getAppId } from "../utils"
import { getAppId } from "../utils/getAppId"
/**
* API cache for cached request responses.

5
packages/client/src/api/datasources.js
View file

@ -19,9 +19,10 @@ export const fetchDatasource = async (datasource, dataContext) => {
} else if (type === "view") {
rows = await fetchViewData(datasource)
} else if (type === "link") {
const row = dataContext[datasource.providerId]
rows = await fetchRelationshipData({
rowId: dataContext?.data?._id,
tableId: dataContext?.data?.tableId,
rowId: row?._id,
tableId: row?.tableId,
fieldName,
})
}

6
packages/client/src/components/ClientApp.svelte
View file

@ -1,12 +1,14 @@
<script>
import { writable } from "svelte/store"
import { setContext, onMount } from "svelte"
import Component from "./Component.svelte"
import SDK from "../sdk"
import { routeStore, screenStore, createDataContextStore } from "../store"
import { createDataStore, routeStore, screenStore } from "../store"
// Provide contexts
setContext("sdk", SDK)
setContext("data", createDataContextStore())
setContext("component", writable({}))
setContext("data", createDataStore())
let loaded = false

53
packages/client/src/components/Component.svelte
View file

@ -1,48 +1,43 @@
<script>
import { getContext, setContext } from "svelte"
import { writable } from "svelte/store"
import * as ComponentLibrary from "@budibase/standard-components"
import Router from "./Router.svelte"
import { enrichProps } from "../utils/componentProps"
import { bindingStore } from "../store"
export let definition = {}
// Extracts the actual component name from the library name
const extractComponentName = name => {
const split = name?.split("/")
return split?.[split.length - 1]
}
// Get local data binding context
const dataStore = getContext("data")
// Extracts valid props to pass to the real svelte component
const extractValidProps = component => {
let props = {}
Object.entries(component)
.filter(([name]) => !name.startsWith("_"))
.forEach(([key, value]) => {
props[key] = value
})
return props
}
// Gets the component constructor for the specified component
const getComponentConstructor = name => {
return name === "screenslot" ? Router : ComponentLibrary[componentName]
}
// Create component context
const componentStore = writable({})
setContext("component", componentStore)
// Extract component definition info
const componentName = extractComponentName(definition._component)
const constructor = getComponentConstructor(componentName)
const componentProps = extractValidProps(definition)
const dataContext = getContext("data")
const enrichedProps = dataContext.actions.enrichDataBindings(componentProps)
const children = definition._children
$: constructor = getComponentConstructor(definition._component)
$: children = definition._children
$: id = definition._id
$: enrichedProps = enrichProps(definition, $dataStore, $bindingStore)
// Set contexts to be consumed by component
setContext("style", { ...definition._styles, id: definition._id })
// Update component context
// ID is duplicated inside style so that the "styleable" helper can set
// an ID data tag for unique reference to components
$: componentStore.set({ id, styles: { ...definition._styles, id } })
// Gets the component constructor for the specified component
const getComponentConstructor = component => {
const split = component?.split("/")
const name = split?.[split.length - 1]
return name === "screenslot" ? Router : ComponentLibrary[name]
}
</script>
{#if constructor}
<svelte:component this={constructor} {...enrichedProps}>
{#if children && children.length}
{#each children as child}
{#each children as child (child._id)}
<svelte:self definition={child} />
{/each}
{/if}

28
packages/client/src/components/DataProvider.svelte
View file

@ -1,25 +1,15 @@
<script>
import { onMount, getContext, setContext } from "svelte"
import { createDataContextStore } from "../store"
import { getContext, setContext } from "svelte"
import { createDataStore } from "../store"
export let row
// Get current contexts
const dataContext = getContext("data")
const { id } = getContext("style")
// Clone current context to this context
const newDataContext = createDataContextStore($dataContext)
setContext("data", newDataContext)
// Add additional layer to context
let loaded = false
onMount(() => {
newDataContext.actions.addContext(row, id)
loaded = true
})
// Clone and create new data context for this component tree
const data = getContext("data")
const component = getContext("component")
const newData = createDataStore($data)
setContext("data", newData)
$: newData.actions.addContext(row, $component.id)
</script>
{#if loaded}
<slot />
{/if}
<slot />

6
packages/client/src/components/Router.svelte
View file

@ -1,11 +1,11 @@
<script>
import { getContext } from "svelte"
import Router from "svelte-spa-router"
import { routeStore, screenStore } from "../store"
import { routeStore } from "../store"
import Screen from "./Screen.svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
$: routerConfig = getRouterConfig($routeStore.routes)
@ -26,7 +26,7 @@
</script>
{#if routerConfig}
<div use:styleable={styles}>
<div use:styleable={$component.styles}>
<Router on:routeLoading={onRouteLoading} routes={routerConfig} />
</div>
{/if}

9
packages/client/src/components/Screen.svelte
View file

@ -11,8 +11,11 @@
// Redirect to home page if no matching route
$: screenDefinition == null && routeStore.actions.navigate("/")
// Make a screen array so we can use keying to properly re-render each screen
$: screens = screenDefinition ? [screenDefinition] : []
</script>
{#if screenDefinition}
<Component definition={screenDefinition} />
{/if}
{#each screens as screen (screen._id)}
<Component definition={screen} />
{/each}

19
packages/client/src/index.js
View file

@ -1,11 +1,22 @@
import ClientApp from "./components/ClientApp.svelte"
import { builderStore } from "./store"
let app
// Initialise client app
const loadBudibase = () => {
window.document.body.innerHTML = ""
new ClientApp({
target: window.document.body,
// Update builder store with any builder flags
builderStore.set({
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
page: window["##BUDIBASE_PREVIEW_PAGE##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
})
// Create app if one hasn't been created yet
if (!app) {
app = new ClientApp({
target: window.document.body,
})
}
}
// Attach to window so the HTML template can call this when it loads

6
packages/client/src/sdk.js
View file

@ -1,6 +1,7 @@
import * as API from "./api"
import { authStore, routeStore, screenStore } from "./store"
import { styleable, getAppId } from "./utils"
import { authStore, routeStore, screenStore, bindingStore } from "./store"
import { styleable } from "./utils/styleable"
import { getAppId } from "./utils/getAppId"
import { link as linkable } from "svelte-spa-router"
import DataProvider from "./components/DataProvider.svelte"
@ -13,4 +14,5 @@ export default {
linkable,
getAppId,
DataProvider,
setBindableValue: bindingStore.actions.setBindableValue,
}

9
packages/client/src/store/auth.js
View file

@ -1,13 +1,10 @@
import * as API from "../api"
import { getAppId } from "../utils"
import { getAppId } from "../utils/getAppId"
import { writable } from "svelte/store"
const createAuthStore = () => {
const store = writable("")
/**
* Logs a user in.
*/
const logIn = async ({ username, password }) => {
const user = await API.logIn({ username, password })
if (!user.error) {
@ -15,10 +12,6 @@ const createAuthStore = () => {
location.reload()
}
}
/**
* Logs a user out.
*/
const logOut = () => {
store.set("")
const appId = getAppId()

21
packages/client/src/store/binding.js Normal file
View file

@ -0,0 +1,21 @@
import { writable } from "svelte/store"
const createBindingStore = () => {
const store = writable({})
const setBindableValue = (value, componentId) => {
store.update(state => {
if (componentId) {
state[componentId] = value
}
return state
})
}
return {
subscribe: store.subscribe,
actions: { setBindableValue },
}
}
export const bindingStore = createBindingStore()

12
packages/client/src/store/builder.js Normal file
View file

@ -0,0 +1,12 @@
import { writable } from "svelte/store"
const createBuilderStore = () => {
const initialState = {
inBuilder: false,
page: null,
screen: null,
}
return writable(initialState)
}
export const builderStore = createBuilderStore()

26
packages/client/src/store/data.js Normal file
View file

@ -0,0 +1,26 @@
import { writable } from "svelte/store"
import { cloneDeep } from "lodash/fp"
export const createDataStore = existingContext => {
const store = writable({ ...existingContext })
// Adds a context layer to the data context tree
const addContext = (row, componentId) => {
store.update(state => {
if (componentId) {
state[componentId] = row
state[`${componentId}_draft`] = cloneDeep(row)
state.closestComponentId = componentId
}
return state
})
}
return {
subscribe: store.subscribe,
update: store.update,
actions: { addContext },
}
}
export const dataStore = createDataStore()

39
packages/client/src/store/dataContext.js
View file

@ -1,39 +0,0 @@
import { writable, get } from "svelte/store"
import { enrichDataBinding } from "../utils"
import { cloneDeep } from "lodash/fp"
const initialValue = {
data: null,
}
export const createDataContextStore = existingContext => {
const initial = existingContext ? cloneDeep(existingContext) : initialValue
const store = writable(initial)
// Adds a context layer to the data context tree
const addContext = (row, componentId) => {
store.update(state => {
if (row && componentId) {
state[componentId] = row
state.data = row
}
return state
})
}
// Enriches props by running mustache and filling in any data bindings present
// in the prop values
const enrichDataBindings = props => {
const state = get(store)
let enrichedProps = {}
Object.entries(props).forEach(([key, value]) => {
enrichedProps[key] = enrichDataBinding(value, state)
})
return enrichedProps
}
return {
subscribe: store.subscribe,
actions: { addContext, enrichDataBindings },
}
}

6
packages/client/src/store/index.js
View file

@ -1,4 +1,8 @@
export { authStore } from "./auth"
export { routeStore } from "./routes"
export { screenStore } from "./screens"
export { createDataContextStore } from "./dataContext"
export { builderStore } from "./builder"
export { bindingStore } from "./binding"
// Data stores are layered and duplicated, so it is not a singleton
export { createDataStore, dataStore } from "./data"

54
packages/client/src/store/screens.js
View file

@ -1,43 +1,45 @@
import { writable, derived } from "svelte/store"
import { routeStore } from "./routes"
import { builderStore } from "./builder"
import * as API from "../api"
import { getAppId } from "../utils"
import { getAppId } from "../utils/getAppId"
const createScreenStore = () => {
const config = writable({
screens: [],
page: {},
})
const store = derived([config, routeStore], ([$config, $routeStore]) => {
const { screens, page } = $config
const activeScreen =
screens.length === 1
? screens[0]
: screens.find(
const store = derived(
[config, routeStore, builderStore],
([$config, $routeStore, $builderStore]) => {
let page
let activeScreen
if ($builderStore.inBuilder) {
// Use builder defined definitions if inside the builder preview
page = $builderStore.page
activeScreen = $builderStore.screen
} else {
// Otherwise find the correct screen by matching the current route
page = $config.page
const { screens } = $config
if (screens.length === 1) {
activeScreen = screens[0]
} else {
activeScreen = screens.find(
screen => screen.routing.route === $routeStore.activeRoute
)
return {
screens,
page,
activeScreen,
}
}
return { page, activeScreen }
}
})
)
const fetchScreens = async () => {
let screens
let page
const inBuilder = !!window["##BUDIBASE_IN_BUILDER##"]
if (inBuilder) {
// Load screen and page from the window object if in the builder
screens = [window["##BUDIBASE_PREVIEW_SCREEN##"]]
page = window["##BUDIBASE_PREVIEW_PAGE##"]
} else {
// Otherwise load from API
const appDefinition = await API.fetchAppDefinition(getAppId())
screens = appDefinition.screens
page = appDefinition.page
}
config.set({ screens, page })
const appDefinition = await API.fetchAppDefinition(getAppId())
config.set({
screens: appDefinition.screens,
page: appDefinition.page,
})
}
return {

45
packages/client/src/utils/buttonActions.js Normal file
View file

@ -0,0 +1,45 @@
import { enrichDataBinding } from "./enrichDataBinding"
import { routeStore } from "../store"
import { saveRow, deleteRow } from "../api"
const saveRowHandler = async (action, context) => {
let draft = context[`${action.parameters.contextPath}_draft`]
if (action.parameters.fields) {
Object.entries(action.parameters.fields).forEach(([key, entry]) => {
draft[key] = enrichDataBinding(entry.value, context)
})
}
await saveRow(draft)
}
const deleteRowHandler = async (action, context) => {
const { tableId, revId, rowId } = action.parameters
await deleteRow({
tableId: enrichDataBinding(tableId, context),
rowId: enrichDataBinding(rowId, context),
revId: enrichDataBinding(revId, context),
})
}
const navigationHandler = action => {
routeStore.actions.navigate(action.parameters.url)
}
const handlerMap = {
["Save Row"]: saveRowHandler,
["Delete Row"]: deleteRowHandler,
["Navigate To"]: navigationHandler,
}
/**
* Parses an array of actions and returns a function which will execute the
* actions in the current context.
*/
export const enrichButtonActions = (actions, context) => {
const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
return async () => {
for (let i = 0; i < handlers.length; i++) {
await handlers[i](actions[i], context)
}
}
}

35
packages/client/src/utils/componentProps.js Normal file
View file

@ -0,0 +1,35 @@
import { enrichDataBindings } from "./enrichDataBinding"
import { enrichButtonActions } from "./buttonActions"
/**
* Enriches component props.
* Data bindings are enriched, and button actions are enriched.
*/
export const enrichProps = (props, dataContexts, dataBindings) => {
// Exclude all private props that start with an underscore
let validProps = {}
Object.entries(props)
.filter(([name]) => !name.startsWith("_"))
.forEach(([key, value]) => {
validProps[key] = value
})
// Create context of all bindings and data contexts
// Duplicate the closest context as "data" which the builder requires
const context = {
...dataContexts,
...dataBindings,
data: dataContexts[dataContexts.closestComponentId],
data_draft: dataContexts[`${dataContexts.closestComponentId}_draft`],
}
// Enrich all data bindings in top level props
let enrichedProps = enrichDataBindings(validProps, context)
// Enrich button actions if they exist
if (props._component.endsWith("/button") && enrichedProps.onClick) {
enrichedProps.onClick = enrichButtonActions(enrichedProps.onClick, context)
}
return enrichedProps
}

14
packages/client/src/utils/enrichDataBinding.js
View file

@ -8,6 +8,9 @@ const entityMap = {
">": "&gt;",
}
mustache.escape = text => {
if (text == null || typeof text !== "string") {
return text
}
return text.replace(/[<>]/g, function fromEntityMap(s) {
return entityMap[s] || s
})
@ -30,3 +33,14 @@ export const enrichDataBinding = (input, context) => {
}
return mustache.render(input, context)
}
/**
* Enriches each prop in a props object
*/
export const enrichDataBindings = (props, context) => {
let enrichedProps = {}
Object.entries(props).forEach(([key, value]) => {
enrichedProps[key] = enrichDataBinding(value, context)
})
return enrichedProps
}

3
packages/client/src/utils/index.js
View file

@ -1,3 +0,0 @@
export { getAppId } from "./getAppId"
export { styleable } from "./styleable"
export { enrichDataBinding } from "./enrichDataBinding"

69
packages/client/src/utils/styleable.js
View file

@ -1,7 +1,13 @@
import { getContext } from "svelte"
import { get } from "svelte/store"
/**
* Helper to build a CSS string from a style object
*/
const buildStyleString = styles => {
let str = ""
Object.entries(styles).forEach(([style, value]) => {
if (style && value) {
if (style && value != null) {
str += `${style}: ${value}; `
}
})
@ -12,35 +18,52 @@ const buildStyleString = styles => {
* Svelte action to apply correct component styles.
*/
export const styleable = (node, styles = {}) => {
const normalStyles = styles.normal || {}
const hoverStyles = {
...normalStyles,
...styles.hover,
let applyNormalStyles
let applyHoverStyles
// Creates event listeners and applies initial styles
const setupStyles = newStyles => {
const normalStyles = newStyles.normal || {}
const hoverStyles = {
...normalStyles,
...newStyles.hover,
}
applyNormalStyles = () => {
node.style = buildStyleString(normalStyles)
}
applyHoverStyles = () => {
node.style = buildStyleString(hoverStyles)
}
// Add listeners to toggle hover styles
node.addEventListener("mouseover", applyHoverStyles)
node.addEventListener("mouseout", applyNormalStyles)
node.setAttribute("data-bb-id", newStyles.id)
// Apply initial normal styles
applyNormalStyles()
}
function applyNormalStyles() {
node.style = buildStyleString(normalStyles)
// Removes the current event listeners
const removeListeners = () => {
node.removeEventListener("mouseover", applyHoverStyles)
node.removeEventListener("mouseout", applyNormalStyles)
}
function applyHoverStyles() {
node.style = buildStyleString(hoverStyles)
}
// Add listeners to toggle hover styles
node.addEventListener("mouseover", applyHoverStyles)
node.addEventListener("mouseout", applyNormalStyles)
// Apply normal styles initially
applyNormalStyles()
// Also apply data tags so we know how to reference each component
node.setAttribute("data-bb-id", styles.id)
// Apply initial styles
setupStyles(styles)
return {
// Clean up event listeners when component is destroyed
// Clean up old listeners and apply new ones on update
update: newStyles => {
removeListeners()
setupStyles(newStyles)
},
// Clean up listeners when component is destroyed
destroy: () => {
node.removeEventListener("mouseover", applyHoverStyles)
node.removeEventListener("mouseout", applyNormalStyles)
removeListeners()
},
}
}

9
packages/standard-components/src/Button.svelte
View file

@ -2,14 +2,19 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let className = "default"
export let disabled = false
export let text
export let onClick
</script>
<button class="default" disabled={disabled || false} use:styleable={styles}>
<button
class="default"
disabled={disabled || false}
use:styleable={$component.styles}
on:click={onClick}>
{text}
</button>

7
packages/standard-components/src/Card.svelte
View file

@ -3,7 +3,7 @@
import { cssVars } from "./helpers"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export const className = ""
export let imageUrl = ""
@ -26,7 +26,10 @@
$: showImage = !!imageUrl
</script>
<div use:cssVars={cssVariables} class="container" use:styleable={styles}>
<div
use:cssVars={cssVariables}
class="container"
use:styleable={$component.styles}>
{#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
<div class="content">
<h2 class="heading">{heading}</h2>

7
packages/standard-components/src/CardHorizontal.svelte
View file

@ -3,7 +3,7 @@
import { cssVars } from "./helpers"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export const className = ""
export let imageUrl = ""
@ -29,7 +29,10 @@
$: showImage = !!imageUrl
</script>
<div use:cssVars={cssVariables} class="container" use:styleable={styles}>
<div
use:cssVars={cssVariables}
class="container"
use:styleable={$component.styles}>
{#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
<div class="content">
<main>

28
packages/standard-components/src/Container.svelte
View file

@ -2,62 +2,62 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let className = ""
export let type = "div"
</script>
{#if type === 'div'}
<div use:styleable={styles}>
<div use:styleable={$component.styles}>
<slot />
</div>
{:else if type === 'header'}
<header use:styleable={styles}>
<header use:styleable={$component.styles}>
<slot />
</header>
{:else if type === 'main'}
<main use:styleable={styles}>
<main use:styleable={$component.styles}>
<slot />
</main>
{:else if type === 'footer'}
<footer use:styleable={styles}>
<footer use:styleable={$component.styles}>
<slot />
</footer>
{:else if type === 'aside'}
<aside use:styleable={styles}>
<aside use:styleable={$component.styles}>
<slot />
</aside>
{:else if type === 'summary'}
<summary use:styleable={styles}>
<summary use:styleable={$component.styles}>
<slot />
</summary>
{:else if type === 'details'}
<details use:styleable={styles}>
<details use:styleable={$component.styles}>
<slot />
</details>
{:else if type === 'article'}
<article use:styleable={styles}>
<article use:styleable={$component.styles}>
<slot />
</article>
{:else if type === 'nav'}
<nav use:styleable={styles}>
<nav use:styleable={$component.styles}>
<slot />
</nav>
{:else if type === 'mark'}
<mark use:styleable={styles}>
<mark use:styleable={$component.styles}>
<slot />
</mark>
{:else if type === 'figure'}
<figure use:styleable={styles}>
<figure use:styleable={$component.styles}>
<slot />
</figure>
{:else if type === 'figcaption'}
<figcaption use:styleable={styles}>
<figcaption use:styleable={$component.styles}>
<slot />
</figcaption>
{:else if type === 'paragraph'}
<p use:styleable={styles}>
<p use:styleable={$component.styles}>
<slot />
</p>
{/if}

10
packages/standard-components/src/DatePicker.svelte
View file

@ -2,11 +2,13 @@
import { DatePicker } from "@budibase/bbui"
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const { styleable, setBindableValue } = getContext("sdk")
const component = getContext("component")
export let placeholder
export let value
let value
$: setBindableValue(value, $component.id)
function handleChange(event) {
const [fullDate] = event.detail
@ -14,6 +16,6 @@
}
</script>
<div use:styleable={styles}>
<div use:styleable={$component.styles}>
<DatePicker {placeholder} on:change={handleChange} {value} />
</div>

4
packages/standard-components/src/Embed.svelte
View file

@ -2,12 +2,12 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let embed
</script>
<div use:styleable={styles}>
<div use:styleable={$component.styles}>
{@html embed}
</div>

21
packages/standard-components/src/Form.svelte
View file

@ -5,9 +5,9 @@
import LinkedRowSelector from "./LinkedRowSelector.svelte"
import { capitalise } from "./helpers"
const { styleable, screenStore, API } = getContext("sdk")
const dataContextStore = getContext("data")
const styles = getContext("style")
const { styleable, API } = getContext("sdk")
const component = getContext("component")
const data = getContext("data")
export let wide = false
@ -15,19 +15,22 @@
let schema
let fields = []
$: getContextDetails($dataContextStore)
// Fetch info about the closest data context
$: getFormData($data[$data.closestComponentId])
const getContextDetails = async dataContext => {
row = dataContext?.data
if (row) {
const tableDefinition = await API.fetchTableDefinition(row.tableId)
const getFormData = async context => {
if (context) {
const tableDefinition = await API.fetchTableDefinition(context.tableId)
schema = tableDefinition.schema
fields = Object.keys(schema)
// Use the draft version for editing
row = $data[`${$data.closestComponentId}_draft`]
}
}
</script>
<div class="form-content" use:styleable={styles}>
<div class="form-content" use:styleable={$component.styles}>
<!-- <ErrorsBox errors={$store.saveRowErrors || {}} />-->
{#each fields as field}
<div class="form-field" class:wide>

14
packages/standard-components/src/Heading.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let className = ""
export let type
@ -10,15 +10,15 @@
</script>
{#if type === 'h1'}
<h1 class={className} use:styleable={styles}>{text}</h1>
<h1 class={className} use:styleable={$component.styles}>{text}</h1>
{:else if type === 'h2'}
<h2 class={className} use:styleable={styles}>{text}</h2>
<h2 class={className} use:styleable={$component.styles}>{text}</h2>
{:else if type === 'h3'}
<h3 class={className} use:styleable={styles}>{text}</h3>
<h3 class={className} use:styleable={$component.styles}>{text}</h3>
{:else if type === 'h4'}
<h4 class={className} use:styleable={styles}>{text}</h4>
<h4 class={className} use:styleable={$component.styles}>{text}</h4>
{:else if type === 'h5'}
<h5 class={className} use:styleable={styles}>{text}</h5>
<h5 class={className} use:styleable={$component.styles}>{text}</h5>
{:else if type === 'h6'}
<h6 class={className} use:styleable={styles}>{text}</h6>
<h6 class={className} use:styleable={$component.styles}>{text}</h6>
{/if}

4
packages/standard-components/src/Icon.svelte
View file

@ -3,7 +3,7 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let icon = ""
export let size = "fa-lg"
@ -13,4 +13,4 @@
<i
style={`color: ${color};`}
class={`${icon} ${size}`}
use:styleable={styles} />
use:styleable={$component.styles} />

4
packages/standard-components/src/Image.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let className = ""
export let url = ""
@ -17,4 +17,4 @@
class={className}
src={url}
alt={description}
use:styleable={styles} />
use:styleable={$component.styles} />

21
packages/standard-components/src/Input.svelte
View file

@ -1,21 +1,12 @@
<script>
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const { styleable, setBindableValue } = getContext("sdk")
const component = getContext("component")
export let value = ""
export let className = ""
export let type = "text"
const onchange = ev => {
value = ev.target.value
}
// Keep bindable value up to date
let value
$: setBindableValue(value, $component.id)
</script>
<input
class={className}
{type}
{value}
on:change={onchange}
use:styleable={styles} />
<input bind:value on:change={onchange} use:styleable={$component.styles} />

4
packages/standard-components/src/Link.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { linkable, styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let url = ""
export let text = ""
@ -11,7 +11,7 @@
$: target = openInNewTab ? "_blank" : "_self"
</script>
<a href={url} use:linkable {target} use:styleable={styles}>
<a href={url} use:linkable {target} use:styleable={$component.styles}>
{text}
<slot />
</a>

8
packages/standard-components/src/List.svelte
View file

@ -3,8 +3,8 @@
import { isEmpty } from "lodash/fp"
const { API, styleable, DataProvider } = getContext("sdk")
const dataContextStore = getContext("data")
const styles = getContext("style")
const component = getContext("component")
const data = getContext("data")
export let datasource = []
@ -12,12 +12,12 @@
onMount(async () => {
if (!isEmpty(datasource)) {
rows = await API.fetchDatasource(datasource, $dataContextStore)
rows = await API.fetchDatasource(datasource, $data)
}
})
</script>
<div use:styleable={styles}>
<div use:styleable={$component.styles}>
{#each rows as row}
<DataProvider {row}>
<slot />

4
packages/standard-components/src/Login.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { authStore, styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let buttonText = "Log In"
export let logo = ""
@ -29,7 +29,7 @@
}
</script>
<div class="root" use:styleable={styles}>
<div class="root" use:styleable={$component.styles}>
<div class="content">
{#if logo}
<div class="logo-container"><img src={logo} alt="logo" /></div>

4
packages/standard-components/src/Navigation.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { authStore, linkable, styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let logoUrl
export let title
@ -12,7 +12,7 @@
}
</script>
<div class="nav" use:styleable={styles}>
<div class="nav" use:styleable={$component.styles}>
<div class="nav__top">
<a href="/" use:linkable>
{#if logoUrl}

2
packages/standard-components/src/RichText.svelte
View file

@ -23,6 +23,6 @@
}
</script>
<div use:styleable={styles}>
<div use:styleable={$component.styles}>
<RichText bind:content={value} {options} />
</div>

31
packages/standard-components/src/ScreenSlotPlaceholder.svelte Normal file
View file

@ -0,0 +1,31 @@
<script>
import { getContext } from "svelte"
const component = getContext("component")
const { styleable } = getContext("sdk")
</script>
<div use:styleable={$component.styles}>
<h1>Screen Slot</h1>
<span>
The screens that you create will be displayed inside this box.
<br />
This box is just a placeholder, to show you the position of screens.
</span>
</div>
<style>
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
border-style: dashed !important;
border-width: 1px;
color: #000000;
background-color: rgba(0, 0, 0, 0.05);
flex: 1 1 auto;
}
</style>

4
packages/standard-components/src/StackedList.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let imageUrl = ""
export let heading = ""
@ -14,7 +14,7 @@
$: showImage = !!imageUrl
</script>
<div class="container" use:styleable={styles}>
<div class="container" use:styleable={$component.styles}>
<a href={destinationUrl}>
<div class="content">
{#if showImage}

26
packages/standard-components/src/Text.svelte
View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let text = ""
export let className = ""
@ -12,28 +12,28 @@
</script>
{#if isTag('none')}
<span use:styleable={styles}>{text}</span>
<span use:styleable={$component.styles}>{text}</span>
{:else if isTag('bold')}
<b class={className} use:styleable={styles}>{text}</b>
<b class={className} use:styleable={$component.styles}>{text}</b>
{:else if isTag('strong')}
<strong class={className} use:styleable={styles}>{text}</strong>
<strong class={className} use:styleable={$component.styles}>{text}</strong>
{:else if isTag('italic')}
<i class={className} use:styleable={styles}>{text}</i>
<i class={className} use:styleable={$component.styles}>{text}</i>
{:else if isTag('emphasis')}
<em class={className} use:styleable={styles}>{text}</em>
<em class={className} use:styleable={$component.styles}>{text}</em>
{:else if isTag('mark')}
<mark class={className} use:styleable={styles}>{text}</mark>
<mark class={className} use:styleable={$component.styles}>{text}</mark>
{:else if isTag('small')}
<small class={className} use:styleable={styles}>{text}</small>
<small class={className} use:styleable={$component.styles}>{text}</small>
{:else if isTag('del')}
<del class={className} use:styleable={styles}>{text}</del>
<del class={className} use:styleable={$component.styles}>{text}</del>
{:else if isTag('ins')}
<ins class={className} use:styleable={styles}>{text}</ins>
<ins class={className} use:styleable={$component.styles}>{text}</ins>
{:else if isTag('sub')}
<sub class={className} use:styleable={styles}>{text}</sub>
<sub class={className} use:styleable={$component.styles}>{text}</sub>
{:else if isTag('sup')}
<sup class={className} use:styleable={styles}>{text}</sup>
{:else}<span use:styleable={styles}>{text}</span>{/if}
<sup class={className} use:styleable={$component.styles}>{text}</sup>
{:else}<span use:styleable={$component.styles}>{text}</span>{/if}
<style>
span {

6
packages/standard-components/src/charts/ApexChart.svelte
View file

@ -3,15 +3,15 @@
import { chart } from "svelte-apexcharts"
const { styleable } = getContext("sdk")
const styles = getContext("style")
const component = getContext("component")
export let options
</script>
{#if options}
<div use:chart={options} use:styleable={styles} />
<div use:chart={options} use:styleable={$component.styles} />
{:else if options === false}
<div use:styleable={styles}>Invalid chart options</div>
<div use:styleable={$component.styles}>Invalid chart options</div>
{/if}
<style>

3
packages/standard-components/src/charts/BarChart.svelte
View file

@ -5,7 +5,6 @@
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
const dataContext = getContext("data")
export let title
export let datasource
@ -35,7 +34,7 @@
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource, $dataContext)
const result = await API.fetchDatasource(datasource)
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result

3
packages/standard-components/src/charts/CandleStickChart.svelte
View file

@ -5,7 +5,6 @@
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
const dataContext = getContext("data")
export let title
export let datasource
@ -33,7 +32,7 @@
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource, $dataContext)
const result = await API.fetchDatasource(datasource)
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result

3
packages/standard-components/src/charts/LineChart.svelte
View file

@ -5,7 +5,6 @@
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
const dataContext = getContext("data")
// Common props
export let title
@ -41,7 +40,7 @@
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource, $dataContext)
const result = await API.fetchDatasource(datasource)
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result

3
packages/standard-components/src/charts/PieChart.svelte
View file

@ -5,7 +5,6 @@
import { isEmpty } from "lodash/fp"
const { API } = getContext("sdk")
const dataContext = getContext("data")
export let title
export let datasource
@ -31,7 +30,7 @@
// Fetch, filter and sort data
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource, $dataContext)
const result = await API.fetchDatasource(datasource)
const data = result
.filter(row => row[labelColumn] != null && row[valueColumn] != null)
.slice(0, 20)

15
packages/standard-components/src/grid/Component.svelte
View file

@ -15,8 +15,7 @@
// These maps need to be set up to handle whatever types that are used in the tables.
const setters = new Map([["number", number]])
const SDK = getContext("sdk")
const dataContext = getContext("data")
const styles = getContext("style")
const component = getContext("component")
const { API, styleable } = SDK
export let datasource = {}
@ -27,7 +26,13 @@
export let detailUrl
// Add setting height as css var to allow grid to use correct height
styles.normal["--grid-height"] = `${height}px`
$: gridStyles = {
...$component.styles,
normal: {
...$component.styles.normal,
["--grid-height"]: `${height}px`,
},
}
// These can never change at runtime so don't need to be reactive
let canEdit = editable && datasource && datasource.type !== "view"
@ -53,7 +58,7 @@
onMount(async () => {
if (!isEmpty(datasource)) {
data = await API.fetchDatasource(datasource, $dataContext)
data = await API.fetchDatasource(datasource)
let schema
// Get schema for datasource
@ -143,7 +148,7 @@
href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
</svelte:head>
<div class="container" use:styleable={styles}>
<div class="container" use:styleable={gridStyles}>
{#if dataLoaded}
{#if canAddDelete}
<div class="controls">

1
packages/standard-components/src/index.js
View file

@ -23,4 +23,5 @@ export { default as rowdetail } from "./RowDetail.svelte"
export { default as newrow } from "./NewRow.svelte"
export { default as datepicker } from "./DatePicker.svelte"
export { default as icon } from "./Icon.svelte"
export { default as screenslotplaceholder } from "./ScreenSlotPlaceholder.svelte"
export * from "./charts"