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

Merge branch 'develop' of github.com:Budibase/budibase into feature/sql-relationships

This commit is contained in:
mike12345567 2021-06-28 14:42:15 +01:00
parent 10cf55e273 43eaa35992
commit e14cb54d8c
65 changed files with 1894 additions and 1427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
packages/bbui/src/ColorPicker/ColorPicker.svelte Normal file
View File

@ -0,0 +1,239 @@
<script>
import { createEventDispatcher } from "svelte"
import "@spectrum-css/popover/dist/index-vars.css"
import clickOutside from "../Actions/click_outside"
import { fly } from "svelte/transition"
import Icon from "../Icon/Icon.svelte"
import Input from "../Form/Input.svelte"
import { capitalise } from "../utils/helpers"
export let value
export let size = "M"
let open = false
$: color = value || "transparent"
$: customValue = getCustomValue(value)
$: checkColor = getCheckColor(value)
const dispatch = createEventDispatcher()
const categories = [
{
label: "Grays",
colors: [
"white",
"gray-100",
"gray-200",
"gray-300",
"gray-400",
"gray-500",
"gray-600",
"gray-700",
"gray-800",
"gray-900",
"black",
],
},
{
label: "Colors",
colors: [
"red-400",
"orange-400",
"yellow-400",
"green-400",
"seafoam-400",
"blue-400",
"indigo-400",
"magenta-400",
"red-500",
"orange-500",
"yellow-500",
"green-500",
"seafoam-500",
"blue-500",
"indigo-500",
"magenta-500",
"red-600",
"orange-600",
"yellow-600",
"green-600",
"seafoam-600",
"blue-600",
"indigo-600",
"magenta-600",
"red-700",
"orange-700",
"yellow-700",
"green-700",
"seafoam-700",
"blue-700",
"indigo-700",
"magenta-700",
],
},
]
const onChange = value => {
dispatch("change", value)
open = false
}
const getCustomValue = value => {
if (!value) {
return value
}
let found = false
const comparisonValue = value.substring(35, value.length - 1)
for (let category of categories) {
found = category.colors.includes(comparisonValue)
if (found) {
break
}
}
return found ? null : value
}
const prettyPrint = color => {
return capitalise(color.split("-").join(" "))
}
const getCheckColor = value => {
return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
? "black"
: "white"
}
</script>
<div class="container">
<div
class="preview size--{size || 'M'}"
style="background: {color};"
on:click={() => (open = true)}
/>
{#if open}
<div
use:clickOutside={() => (open = false)}
transition:fly={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
>
{#each categories as category}
<div class="category">
<div class="heading">{category.label}</div>
<div class="colors">
{#each category.colors as color}
<div
on:click={() => {
onChange(`var(--spectrum-global-color-static-${color})`)
}}
class="color"
style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
title={prettyPrint(color)}
>
{#if value === `var(--spectrum-global-color-static-${color})`}
<Icon name="Checkmark" size="S" />
{/if}
</div>
{/each}
</div>
</div>
{/each}
<div class="category category--custom">
<div class="heading">Custom</div>
<div class="custom">
<Input
updateOnChange={false}
quiet
placeholder="Hex, RGB, HSL..."
value={customValue}
on:change
/>
<Icon
size="S"
name="Close"
hoverable
on:click={() => onChange(null)}
/>
</div>
</div>
</div>
{/if}
</div>
<style>
.container {
position: relative;
}
.preview {
width: 32px;
height: 32px;
border-radius: 100%;
transition: border-color 130ms ease-in-out;
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
}
.preview:hover {
cursor: pointer;
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
}
.size--S {
width: 20px;
height: 20px;
}
.size--M {
width: 32px;
height: 32px;
}
.size--L {
width: 48px;
height: 48px;
}
.spectrum-Popover {
width: 210px;
z-index: 999;
top: 100%;
padding: var(--spacing-l) var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-xl);
}
.colors {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: var(--spacing-xs);
}
.heading {
font-size: var(--font-size-s);
font-weight: 600;
letter-spacing: 0.14px;
flex: 1 1 auto;
text-transform: uppercase;
grid-column: 1 / 5;
margin-bottom: var(--spacing-s);
}
.color {
height: 16px;
width: 16px;
border-radius: 100%;
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
display: grid;
place-items: center;
}
.color:hover {
cursor: pointer;
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
}
.custom {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--spacing-m);
margin-right: var(--spacing-xs);
}
.category--custom .heading {
margin-bottom: var(--spacing-xs);
}
</style>

59
packages/bbui/src/DetailSummary/DetailSummary.svelte
View File

@ -2,13 +2,15 @@
import Icon from "../Icon/Icon.svelte"
import { createEventDispatcher } from "svelte"
export let name
export let show = false
export let collapsible = true
const dispatch = createEventDispatcher()
export let thin = false
export let name,
show = false
const onHeaderClick = () => {
if (!collapsible) {
return
}
show = !show
if (show) {
dispatch("open")
@ -16,14 +18,14 @@
}
</script>
<div class="property-group-container" class:thin>
<div class="property-group-container">
<div class="property-group-name" on:click={onHeaderClick}>
<div class:thin class="name">{name}</div>
<div class="icon">
<div class="name">{name}</div>
{#if collapsible}
<Icon size="S" name={show ? "Remove" : "Add"} />
</div>
{/if}
</div>
<div class="property-panel" class:show>
<div class="property-panel" class:show={show || !collapsible}>
<slot />
</div>
</div>
@ -32,10 +34,9 @@
.property-group-container {
display: flex;
flex-direction: column;
height: auto;
justify-content: center;
border-radius: var(--border-radius-m);
font-family: var(--font-sans);
justify-content: flex-start;
align-items: stretch;
border-bottom: var(--border-light);
}
.property-group-name {
@ -45,42 +46,38 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--spacing-m) var(--spacing-xl);
color: var(--spectrum-global-color-gray-600);
transition: color 130ms ease-in-out;
}
.property-group-name:hover {
color: var(--spectrum-global-color-gray-900);
}
.name {
text-align: left;
font-size: 14px;
font-size: var(--font-size-s);
font-weight: 600;
letter-spacing: 0.14px;
color: var(--ink);
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
text-transform: uppercase;
white-space: nowrap;
user-select: none;
}
.name.thin {
font-size: var(--spectrum-global-dimension-font-size-75);
}
.icon {
flex: 0 0 20px;
text-align: center;
}
.property-panel {
/* height: 0px;
overflow: hidden; */
display: none;
padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
var(--spacing-xl);
}
.show {
/* overflow: auto;
height: auto; */
display: flex;
flex-direction: column;
flex: 1;
margin-top: var(--spacing-m);
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
}
</style>

25
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -20,6 +20,7 @@
export let open = false
export let readonly = false
export let quiet = false
export let autoWidth = false
const dispatch = createEventDispatcher()
const onClick = () => {
@ -41,7 +42,11 @@
aria-haspopup="listbox"
on:mousedown={onClick}
>
<span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
class:auto-width={autoWidth}
>
{fieldText}
</span>
{#if error}
@ -67,11 +72,12 @@
use:clickOutside={() => (open = false)}
transition:fly={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:auto-width={autoWidth}
>
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
<li
class="spectrum-Menu-item"
class="spectrum-Menu-item placeholder"
class:is-selected={isPlaceholder}
role="option"
aria-selected="true"
@ -118,17 +124,28 @@
<style>
.spectrum-Popover {
max-height: 240px;
width: 100%;
z-index: 999;
top: 100%;
}
.spectrum-Popover:not(.auto-width) {
width: 100%;
}
.spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
white-space: nowrap;
}
.spectrum-Picker {
width: 100%;
}
.spectrum-Picker-label {
.spectrum-Picker-label:not(.auto-width) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 0;
}
.placeholder {
font-style: italic;
}
.spectrum-Picker-label.auto-width.is-placeholder {
padding-right: 2px;
}
</style>

2
packages/bbui/src/Form/Core/Select.svelte
View File

@ -12,6 +12,7 @@
export let getOptionValue = option => option
export let readonly = false
export let quiet = false
export let autoWidth = false
const dispatch = createEventDispatcher()
let open = false
@ -51,6 +52,7 @@
{readonly}
{fieldText}
{options}
{autoWidth}
{getOptionLabel}
{getOptionValue}
isPlaceholder={value == null || value === ""}

2
packages/bbui/src/Form/Core/TextField.svelte
View File

@ -10,6 +10,7 @@
export let id = null
export let readonly = false
export let updateOnChange = true
export let quiet = false
const dispatch = createEventDispatcher()
let focus = false
@ -59,6 +60,7 @@
<div
class="spectrum-Textfield"
class:spectrum-Textfield--quiet={quiet}
class:is-invalid={!!error}
class:is-disabled={disabled}
class:is-focused={focus}

2
packages/bbui/src/Form/Input.svelte
View File

@ -12,6 +12,7 @@
export let readonly = false
export let error = null
export let updateOnChange = true
export let quiet = false
const dispatch = createEventDispatcher()
const onChange = e => {
@ -29,6 +30,7 @@
{value}
{placeholder}
{type}
{quiet}
on:change={onChange}
on:click
on:input

2
packages/bbui/src/Form/Select.svelte
View File

@ -14,6 +14,7 @@
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
export let quiet = false
export let autoWidth = false
const dispatch = createEventDispatcher()
const onChange = e => {
@ -37,6 +38,7 @@
{value}
{options}
{placeholder}
{autoWidth}
{getOptionLabel}
{getOptionValue}
on:change={onChange}

12
packages/bbui/src/Tabs/Tabs.svelte
View File

@ -5,6 +5,8 @@
export let selected
export let vertical = false
export let noPadding = false
let _id = id()
const tab = writable({ title: selected, id: _id })
setContext("tab", tab)
@ -63,14 +65,17 @@
{/if}
</div>
<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
<div
class="spectrum-Tabs-content spectrum-Tabs-content-{_id}"
class:noPadding
/>
<style>
.spectrum-Tabs {
padding-left: var(--spacing-xl);
padding-right: var(--spacing-xl);
position: relative;
border-width: 1px !important;
border-bottom: var(--border-light);
}
.spectrum-Tabs-content {
margin-top: var(--spectrum-global-dimension-static-size-150);
@ -81,4 +86,7 @@
.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
bottom: 0 !important;
}
.noPadding {
margin: 0;
}
</style>

1
packages/bbui/src/index.js
View File

@ -55,6 +55,7 @@ export { default as Search } from "./Form/Search.svelte"
export { default as Pagination } from "./Pagination/Pagination.svelte"
export { default as Badge } from "./Badge/Badge.svelte"
export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
// Typography
export { default as Body } from "./Typography/Body.svelte"

2
packages/bbui/src/utils/helpers.js
View File

@ -4,3 +4,5 @@ export const generateID = () => {
// Starts with a letter so that its a valid DOM ID
return `A${rand}`
}
export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)

6
packages/builder/src/builderStore/store/frontend.js
View File

@ -488,12 +488,12 @@ export const getFrontendStore = () => {
})
await Promise.all(promises)
},
updateStyle: async (type, name, value) => {
updateStyle: async (name, value) => {
const selected = get(selectedComponent)
if (value == null || value === "") {
delete selected._styles[type][name]
delete selected._styles.normal[name]
} else {
selected._styles[type][name] = value
selected._styles.normal[name] = value
}
await store.actions.preview.saveSelected()
},

4
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
View File

@ -54,6 +54,10 @@ function generateTitleContainer(table) {
.type("h2")
.instanceName("Title")
.text(table.name)
.customProps({
size: "M",
align: "left",
})
return new Component("@budibase/standard-components/container")
.normalStyle({

1
packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
View File

@ -21,6 +21,7 @@ export class Screen extends BaseStructure {
hAlign: "stretch",
vAlign: "top",
size: "grow",
gap: "M",
},
routing: {
route: "",

19
packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
View File

@ -25,11 +25,8 @@ export function makeLinkComponent(tableName) {
.customProps({
url: `/${tableName.toLowerCase()}`,
openInNewTab: false,
color: "",
hoverColor: "",
underline: false,
fontSize: "",
fontFamily: "initial",
size: "S",
align: "left",
})
}
@ -62,6 +59,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
.customStyle(spectrumColor(700))
.text(">")
.instanceName("Arrow")
.customProps({
size: "S",
align: "left",
})
const textStyling = {
color: "#000000",
@ -77,6 +78,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
.customStyle(spectrumColor(700))
.text(text)
.instanceName("Identifier")
.customProps({
size: "S",
align: "left",
})
return new Component("@budibase/standard-components/container")
.normalStyle({
@ -148,6 +153,10 @@ export function makeTitleContainer(title) {
.type("h2")
.instanceName("Title")
.text(title)
.customProps({
size: "M",
align: "left",
})
return new Component("@budibase/standard-components/container")
.normalStyle({

2
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View File

@ -45,7 +45,7 @@
size="L"
confirmText="Create"
onConfirm={saveDatasource}
disabled={error || !name}
disabled={error || !name || !integration?.type}
>
<Input
data-cy="datasource-name-input"

24
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
View File

@ -4,10 +4,13 @@
import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
import { FrontendTypes } from "constants"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
let iframe
let layout
let screen
let confirmDeleteDialog
let idToDelete
// Create screen slot placeholder for use when a page is selected rather
// than a screen
@ -73,15 +76,26 @@
// Add listener for events sent by cliebt library in preview
iframe.contentWindow.addEventListener("bb-event", event => {
const { type, data } = event.detail
if (type === "select-component") {
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
idToDelete = data.id
confirmDeleteDialog.show()
} else {
console.log(data)
}
})
})
const deleteComponent = () => {
store.actions.components.delete({ _id: idToDelete })
idToDelete = null
}
const cancelDeleteComponent = () => {
idToDelete = null
}
</script>
<div class="component-container">
@ -92,6 +106,14 @@
srcdoc={template}
/>
</div>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={`Are you sure you want to delete this component?`}
okText="Delete component"
onOk={deleteComponent}
onCancel={cancelDeleteComponent}
/>
<style>
.component-container {

40
packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
View File

@ -1,40 +0,0 @@
<script>
export let categories = []
export let selectedCategory = {}
export let onClick = () => {}
</script>
<div class="tabs">
{#each categories as category}
<li
data-cy={category.name}
on:click={() => onClick(category)}
class:active={selectedCategory === category}
>
{category.name}
</li>
{/each}
</div>
<style>
.tabs {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
list-style: none;
font-size: var(--font-size-m);
font-weight: 600;
height: 24px;
}
li {
color: var(--grey-5);
cursor: pointer;
margin-right: 20px;
}
.active {
color: var(--ink);
}
</style>

105
packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte → packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View File

@ -1,11 +1,13 @@
<script>
import { get } from "lodash"
import { isEmpty } from "lodash/fp"
import { Button, Checkbox, Input, Select } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { currentAsset } from "builderStore"
import { findClosestMatchingComponent } from "builderStore/storeUtils"
import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
import {
Checkbox,
Input,
Select,
DetailSummary,
ColorPicker,
} from "@budibase/bbui"
import { store } from "builderStore"
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@ -20,7 +22,6 @@
import EventsEditor from "./PropertyControls/EventsEditor"
import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte"
import { IconSelect } from "./PropertyControls/IconSelect"
import ColorPicker from "./PropertyControls/ColorPicker.svelte"
import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
@ -29,13 +30,11 @@
import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
export let componentDefinition = {}
export let componentInstance = {}
export let componentDefinition
export let componentInstance
export let assetInstance
export let onChange = () => {}
export let onScreenPropChange = () => {}
export let showDisplayName = false
const layoutDefinition = []
const screenDefinition = [
@ -44,12 +43,12 @@
{ key: "routing.roleId", label: "Access", control: RoleSelect },
{ key: "layoutId", label: "Layout", control: LayoutSelect },
]
let confirmResetFieldsDialog
$: settings = componentDefinition?.settings ?? []
$: isLayout = assetInstance && assetInstance.favicon
$: assetDefinition = isLayout ? layoutDefinition : screenDefinition
const updateProp = store.actions.components.updateProp
const controlMap = {
text: Input,
select: Select,
@ -91,51 +90,19 @@
}
return true
}
const onInstanceNameChange = name => {
onChange("_instanceName", name)
}
const resetFormFields = () => {
const form = findClosestMatchingComponent(
$currentAsset.props,
componentInstance._id,
component => component._component.endsWith("/form")
)
const dataSource = form?.dataSource
const fields = makeDatasourceFormComponents(dataSource)
onChange(
"_children",
fields.map(field => field.json())
)
}
</script>
<div class="settings-view-container">
{#if assetInstance}
{#each assetDefinition as def (`${componentInstance._id}-${def.key}`)}
<PropertyControl
bindable={false}
control={def.control}
label={def.label}
key={def.key}
value={get(assetInstance, def.key)}
onChange={val => onScreenPropChange(def.key, val)}
/>
{/each}
{/if}
{#if showDisplayName}
<DetailSummary name="General" collapsible={false}>
{#if !componentInstance._component.endsWith("/layout")}
<PropertyControl
bindable={false}
control={Input}
label="Name"
key="_instanceName"
value={componentInstance._instanceName}
onChange={onInstanceNameChange}
onChange={val => updateProp("_instanceName", val)}
/>
{/if}
{#if settings && settings.length > 0}
{#each settings as setting (`${componentInstance._id}-${setting.key}`)}
{#if canRenderControl(setting)}
@ -147,52 +114,28 @@
value={componentInstance[setting.key] ??
componentInstance[setting.key]?.defaultValue}
{componentInstance}
onChange={val => onChange(setting.key, val)}
props={{ options: setting.options, placeholder: setting.placeholder }}
onChange={val => updateProp(setting.key, val)}
props={{
options: setting.options,
placeholder: setting.placeholder,
}}
/>
{/if}
{/each}
{:else}
<div class="text">This component doesn't have any additional settings.</div>
{/if}
{#if componentDefinition?.component?.endsWith("/fieldgroup")}
<ResetFieldsButton {componentInstance} />
{/if}
{#if componentDefinition?.info}
<div class="text">
{@html componentDefinition?.info}
</div>
{/if}
{#if componentDefinition?.component?.endsWith("/fieldgroup")}
<div class="buttonWrapper">
<Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
Update Form Fields
</Button>
</div>
{/if}
</div>
<ConfirmDialog
bind:this={confirmResetFieldsDialog}
body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
okText="Update"
onOk={resetFormFields}
title="Confirm Form Field Update"
/>
</DetailSummary>
<style>
.settings-view-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
gap: var(--spacing-s);
}
.text {
font-size: var(--spectrum-global-dimension-font-size-75);
margin-top: var(--spacing-m);
color: var(--grey-6);
}
.buttonWrapper {
margin-top: 10px;
display: flex;
flex-direction: column;
}
</style>

60
packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte Normal file
View File

@ -0,0 +1,60 @@
<script>
import {
TextArea,
DetailSummary,
ActionButton,
Drawer,
DrawerContent,
Layout,
Body,
Button,
} from "@budibase/bbui"
import { store } from "builderStore"
export let componentInstance
let tempValue
let drawer
const openDrawer = () => {
tempValue = componentInstance?._styles?.custom
drawer.show()
}
const save = () => {
store.actions.components.updateCustomStyle(tempValue)
drawer.hide()
}
</script>
<DetailSummary
name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
collapsible={false}
>
<div>
<ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
</div>
</DetailSummary>
<Drawer bind:this={drawer} title="Custom CSS">
<Button cta slot="buttons" on:click={save}>Save</Button>
<DrawerContent slot="body">
<div class="content">
<Layout gap="S">
<Body size="S">Custom CSS overrides all other component styles.</Body>
<TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
</Layout>
</div>
</DrawerContent>
</Drawer>
<style>
.content {
max-width: 800px;
margin: 0 auto;
}
.content :global(textarea) {
font-family: monospace;
min-height: 240px !important;
font-size: var(--font-size-s);
}
</style>

34
packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte Normal file
View File

@ -0,0 +1,34 @@
<script>
import StyleSection from "./StyleSection.svelte"
import * as ComponentStyles from "./componentStyles"
export let componentDefinition
export let componentInstance
const getStyles = def => {
if (!def?.styles?.length) {
return [...ComponentStyles.all]
}
let styles = [...ComponentStyles.all]
def.styles.forEach(style => {
if (ComponentStyles[style]) {
styles.push(ComponentStyles[style])
}
})
return styles
}
$: styles = getStyles(componentDefinition)
</script>
{#if styles?.length > 0}
{#each styles as style}
<StyleSection
{style}
name={style.label}
columns={style.columns}
properties={style.settings}
{componentInstance}
/>
{/each}
{/if}

111
packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
View File

@ -1,111 +0,0 @@
<script>
import { TextArea, DetailSummary, Button } from "@budibase/bbui"
import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
import { allStyles } from "./componentStyles"
export let componentDefinition = {}
export let componentInstance = {}
export let onStyleChanged = () => {}
export let onCustomStyleChanged = () => {}
export let onResetStyles = () => {}
let selectedCategory = "normal"
let currentGroup
function onChange(category) {
selectedCategory = category
}
const buttonProps = [
{ value: "normal", text: "Normal" },
{ value: "hover", text: "Hover" },
{ value: "active", text: "Active" },
]
$: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
</script>
<div class="container">
<div class="state-categories">
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
</div>
<div class="positioned-wrapper">
<div class="property-groups">
{#if groups.length > 0}
{#each groups as groupName}
<PropertyGroup
name={groupName}
properties={allStyles[groupName]}
styleCategory={selectedCategory}
{onStyleChanged}
{componentInstance}
open={currentGroup === groupName}
on:open={() => (currentGroup = groupName)}
/>
{/each}
<DetailSummary
name={`Custom Styles${componentInstance._styles.custom ? " *" : ""}`}
on:open={() => (currentGroup = "custom")}
show={currentGroup === "custom"}
thin
>
<div class="custom-styles">
<TextArea
value={componentInstance._styles.custom}
on:change={event => onCustomStyleChanged(event.detail)}
placeholder="Enter some CSS..."
/>
</div>
</DetailSummary>
<Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
{:else}
<div class="no-design">
This component doesn't have any design properties.
</div>
{/if}
</div>
</div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
gap: var(--spacing-l);
}
.positioned-wrapper {
position: relative;
display: flex;
min-height: 0;
flex: 1 1 auto;
}
.property-groups {
flex: 1;
overflow-y: auto;
min-height: 0;
margin: 0 -20px;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-m);
}
.no-design {
font-size: var(--font-size-xs);
color: var(--grey-5);
}
.custom-styles :global(textarea) {
font-family: monospace;
min-height: 120px;
font-size: var(--font-size-xs);
}
</style>

87
packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
View File

@ -1,84 +1,33 @@
<script>
import { get } from "svelte/store"
import { store, selectedComponent, currentAsset } from "builderStore"
import { store, selectedComponent } from "builderStore"
import { Tabs, Tab } from "@budibase/bbui"
import { FrontendTypes } from "constants"
import DesignView from "./DesignView.svelte"
import SettingsView from "./SettingsView.svelte"
import { setWith } from "lodash"
import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
import DesignSection from "./DesignSection.svelte"
import CustomStylesSection from "./CustomStylesSection.svelte"
$: definition = store.actions.components.getDefinition(
$: componentInstance = $selectedComponent
$: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component
)
$: isComponentOrScreen =
$store.currentView === "component" ||
$store.currentFrontEndType === FrontendTypes.SCREEN
$: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot")
$: showDisplayName = isComponentOrScreen && isNotScreenslot
const onStyleChanged = store.actions.components.updateStyle
const onCustomStyleChanged = store.actions.components.updateCustomStyle
const onResetStyles = store.actions.components.resetStyles
function setAssetProps(name, value) {
const selectedAsset = get(currentAsset)
store.update(state => {
if (
name === "_instanceName" &&
state.currentFrontEndType === FrontendTypes.SCREEN
) {
selectedAsset.props._instanceName = value
} else {
setWith(selectedAsset, name.split("."), value, Object)
}
return state
})
store.actions.preview.saveSelected()
}
</script>
<Tabs selected="Settings">
<Tabs selected="Settings" noPadding>
<Tab title="Settings">
<div class="tab-content-padding">
{#if definition && definition.name}
<div class="instance-name">{definition.name}</div>
{/if}
<SettingsView
componentInstance={$selectedComponent}
componentDefinition={definition}
{showDisplayName}
onChange={store.actions.components.updateProp}
onScreenPropChange={setAssetProps}
assetInstance={$store.currentView !== "component" && $currentAsset}
/>
</div>
</Tab>
<Tab title="Design">
<div class="tab-content-padding">
{#if definition && definition.name}
<div class="instance-name">{definition.name}</div>
{/if}
<DesignView
componentInstance={$selectedComponent}
componentDefinition={definition}
{onStyleChanged}
{onCustomStyleChanged}
{onResetStyles}
/>
<div class="container">
<ScreenSettingsSection {componentInstance} {componentDefinition} />
<ComponentSettingsSection {componentInstance} {componentDefinition} />
<DesignSection {componentInstance} {componentDefinition} />
<CustomStylesSection {componentInstance} {componentDefinition} />
</div>
</Tab>
</Tabs>
<style>
.tab-content-padding {
padding: 0 var(--spacing-xl);
}
.instance-name {
font-size: var(--spectrum-global-dimension-font-size-75);
margin-bottom: var(--spacing-m);
margin-top: var(--spacing-xs);
font-weight: 600;
color: var(--grey-7);
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
</style>

80
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -1,5 +1,5 @@
<script>
import { Button, Icon, Drawer } from "@budibase/bbui"
import { Button, Icon, Drawer, Label } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import {
getBindableProperties,
@ -70,7 +70,11 @@
</script>
<div class="property-control" bind:this={anchor} data-cy={`setting-${key}`}>
<div class="label">{label}</div>
{#if type !== "boolean"}
<div class="label">
<Label>{label}</Label>
</div>
{/if}
<div data-cy={`${key}-prop-control`} class="control">
<svelte:component
this={control}
@ -79,63 +83,55 @@
updateOnChange={false}
on:change={handleChange}
onChange={handleChange}
name={key}
text={label}
{type}
{...props}
name={key}
/>
</div>
{#if bindable && !key.startsWith("_") && type === "text"}
<div
class="icon"
data-cy={`${key}-binding-button`}
on:click={bindingDrawer.show}
>
<Icon size="S" name="FlashOn" />
</div>
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
<svelte:fragment slot="description">
Add the objects on the left to enrich your text.
</svelte:fragment>
<Button cta slot="buttons" disabled={!valid} on:click={handleClose}
>Save</Button
{#if bindable && !key.startsWith("_") && type === "text"}
<div
class="icon"
data-cy={`${key}-binding-button`}
on:click={bindingDrawer.show}
>
<BindingPanel
slot="body"
bind:valid
value={safeValue}
close={handleClose}
on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties}
/>
</Drawer>
{/if}
<Icon size="S" name="FlashOn" />
</div>
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
<svelte:fragment slot="description">
Add the objects on the left to enrich your text.
</svelte:fragment>
<Button cta slot="buttons" disabled={!valid} on:click={handleClose}>
Save
</Button>
<BindingPanel
slot="body"
bind:valid
value={safeValue}
close={handleClose}
on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties}
/>
</Drawer>
{/if}
</div>
</div>
<style>
.property-control {
position: relative;
display: flex;
flex-flow: row;
align-items: center;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.label {
display: flex;
align-items: center;
font-size: 12px;
font-weight: 400;
flex: 0 0 80px;
text-align: left;
color: var(--ink);
margin-right: auto;
text-transform: capitalize;
padding-bottom: var(--spectrum-global-dimension-size-65);
}
.control {
flex: 1;
display: inline-block;
padding-left: 2px;
width: 0;
position: relative;
}
.icon {

54
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
View File

@ -1,54 +0,0 @@
<script>
import PropertyControl from "./PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui"
export let name = ""
export let styleCategory = "normal"
export let properties = []
export let componentInstance = {}
export let onStyleChanged = () => {}
export let open = false
$: style = componentInstance["_styles"][styleCategory] || {}
$: changed = properties.some(prop => hasPropChanged(style, prop))
const hasPropChanged = (style, prop) => {
return style[prop.key] != null && style[prop.key] !== ""
}
const getControlProps = props => {
let controlProps = { ...(props || {}) }
delete controlProps.label
delete controlProps.key
delete controlProps.control
return controlProps
}
</script>
<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
{#if open}
<div>
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<PropertyControl
bindable={false}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
control={prop.control}
key={prop.key}
value={style[prop.key]}
onChange={value => onStyleChanged(styleCategory, prop.key, value)}
props={getControlProps(prop)}
/>
{/each}
</div>
{/if}
</DetailSummary>
<style>
div {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-s);
}
</style>

43
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte Normal file
View File

@ -0,0 +1,43 @@
<script>
import { ActionButton } from "@budibase/bbui"
import { currentAsset, store } from "builderStore"
import { findClosestMatchingComponent } from "builderStore/storeUtils"
import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let componentInstance
let confirmResetFieldsDialog
const resetFormFields = () => {
const form = findClosestMatchingComponent(
$currentAsset.props,
componentInstance._id,
component => component._component.endsWith("/form")
)
const dataSource = form?.dataSource
const fields = makeDatasourceFormComponents(dataSource)
store.actions.components.updateProp(
"_children",
fields.map(field => field.json())
)
}
</script>
<div>
<ActionButton
secondary
wide
on:click={() => confirmResetFieldsDialog?.show()}
>
Update form fields
</ActionButton>
</div>
<ConfirmDialog
bind:this={confirmResetFieldsDialog}
body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
okText="Update"
onOk={resetFormFields}
title="Confirm Form Field Update"
/>

50
packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte Normal file
View File

@ -0,0 +1,50 @@
<script>
import { get } from "svelte/store"
import { get as deepGet, setWith } from "lodash"
import { Input, DetailSummary } from "@budibase/bbui"
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
import RoleSelect from "./PropertyControls/RoleSelect.svelte"
import { currentAsset, store } from "builderStore"
import { FrontendTypes } from "constants"
export let componentInstance
function setAssetProps(name, value) {
const selectedAsset = get(currentAsset)
store.update(state => {
if (
name === "_instanceName" &&
state.currentFrontEndType === FrontendTypes.SCREEN
) {
selectedAsset.props._instanceName = value
} else {
setWith(selectedAsset, name.split("."), value, Object)
}
return state
})
store.actions.preview.saveSelected()
}
const screenSettings = [
// { key: "description", label: "Description", control: Input },
{ key: "routing.route", label: "Route", control: Input },
{ key: "routing.roleId", label: "Access", control: RoleSelect },
{ key: "layoutId", label: "Layout", control: LayoutSelect },
]
</script>
{#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
<DetailSummary name="Screen" collapsible={false}>
{#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
<PropertyControl
bindable={false}
control={def.control}
label={def.label}
key={def.key}
value={deepGet($currentAsset, def.key)}
onChange={val => setAssetProps(def.key, val)}
/>
{/each}
</DetailSummary>
{/if}

51
packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte Normal file
View File

@ -0,0 +1,51 @@
<script>
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui"
import { store } from "builderStore"
export let name
export let columns
export let properties
export let componentInstance
$: style = componentInstance._styles.normal || {}
$: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
const hasPropChanged = (style, prop) => {
return style[prop.key] != null && style[prop.key] !== ""
}
const getControlProps = props => {
let controlProps = { ...(props || {}) }
delete controlProps.label
delete controlProps.key
delete controlProps.control
return controlProps
}
</script>
<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
<div class="group-content" style="grid-template-columns: {columns || '1fr'}">
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<div style="grid-column: {prop.column || 'auto'}">
<PropertyControl
bindable={false}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
control={prop.control}
key={prop.key}
value={style[prop.key]}
onChange={val => store.actions.components.updateStyle(prop.key, val)}
props={getControlProps(prop)}
/>
</div>
{/each}
</div>
</DetailSummary>
<style>
.group-content {
display: grid;
align-items: stretch;
gap: var(--spacing-l);
}
</style>

1086
packages/builder/src/components/design/PropertiesPanel/componentStyles.js
View File

File diff suppressed because it is too large Load Diff

21
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
View File

@ -62,15 +62,17 @@
{#if datasource && integration}
<section>
<Layout>
<header>
<svelte:component
this={ICONS[datasource.source]}
height="26"
width="26"
/>
<Heading size="M">{datasource.name}</Heading>
</header>
<Body size="S" grey lh>{integration.description}</Body>
<Layout gap="XS" noPadding>
<header>
<svelte:component
this={ICONS[datasource.source]}
height="26"
width="26"
/>
<Heading size="M">{datasource.name}</Heading>
</header>
<Body size="M">{integration.description}</Body>
</Layout>
<Divider />
<div class="container">
<div class="config-header">
@ -139,7 +141,6 @@
}
header {
margin: 0 0 var(--spacing-xs) 0;
display: flex;
gap: var(--spacing-l);
align-items: center;

21
packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
View File

@ -14,14 +14,16 @@
<section>
<Layout>
<header>
<svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
<Heading size="M">Budibase Internal</Heading>
</header>
<Body size="S" grey lh
>Budibase internal tables are part of your app, the data will be stored in
your apps context.</Body
>
<Layout gap="XS" noPadding>
<header>
<svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
<Heading size="M">Budibase Internal</Heading>
</header>
<Body size="M">
Budibase internal tables are part of your app, so the data will be
stored in your apps context.
</Body>
</Layout>
<Divider />
<Heading size="S">Tables</Heading>
<div class="table-list">
@ -32,7 +34,7 @@
>
<Body size="S">{table.name}</Body>
{#if table.primaryDisplay}
<Body size="S">display column: {table.primaryDisplay}</Body>
<Body size="S">Display column: {table.primaryDisplay}</Body>
{/if}
</div>
{/each}
@ -50,7 +52,6 @@
}
header {
margin: 0 0 var(--spacing-xs) 0;
display: flex;
gap: var(--spacing-l);
align-items: center;

11
packages/client/src/components/ClientApp.svelte
View File

@ -91,14 +91,15 @@
{/if}
<style>
#spectrum-root {
height: 100%;
width: 100%;
overflow: hidden;
}
#spectrum-root,
#app-root {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#app-root {
position: relative;
}
</style>

33
packages/client/src/components/Component.svelte
View File

@ -23,6 +23,11 @@
// props with old ones, depending on how long enrichment takes.
let latestUpdateTime
// Keep track of stringified representations of context and instance
// to avoid enriching bindings as much as possible
let lastContextKey
let lastInstanceKey
// Get contexts
const context = getContext("context")
const insideScreenslot = !!getContext("screenslot")
@ -42,7 +47,9 @@
definition?.hasChildren &&
definition?.showEmptyState !== false &&
$builderStore.inBuilder
$: updateComponentProps(instance, $context)
$: rawProps = getRawProps(instance)
$: instanceKey = JSON.stringify(rawProps)
$: updateComponentProps(rawProps, instanceKey, $context)
$: selected =
$builderStore.inBuilder &&
$builderStore.selectedComponentId === instance._id
@ -59,6 +66,16 @@
name,
})
const getRawProps = instance => {
let validProps = {}
Object.entries(instance)
.filter(([name]) => !name.startsWith("_"))
.forEach(([key, value]) => {
validProps[key] = value
})
return validProps
}
// Gets the component constructor for the specified component
const getComponentConstructor = component => {
const split = component?.split("/")
@ -76,13 +93,23 @@
}
// Enriches any string component props using handlebars
const updateComponentProps = (instance, context) => {
const updateComponentProps = (rawProps, instanceKey, context) => {
const instanceSame = instanceKey === lastInstanceKey
const contextSame = context.key === lastContextKey
if (instanceSame && contextSame) {
return
} else {
lastInstanceKey = instanceKey
lastContextKey = context.key
}
// Record the timestamp so we can reference it after enrichment
latestUpdateTime = Date.now()
const enrichmentTime = latestUpdateTime
// Enrich props with context
const enrichedProps = enrichProps(instance, context)
const enrichedProps = enrichProps(rawProps, context)
// Abandon this update if a newer update has started
if (enrichmentTime !== latestUpdateTime) {

36
packages/client/src/components/Provider.svelte
View File

@ -14,18 +14,32 @@
const newContext = createContextStore(context)
setContext("context", newContext)
$: providerKey = key || $component.id
const providerKey = key || $component.id
// Add data context
$: newContext.actions.provideData(providerKey, data)
// Generate a permanent unique ID for this component and use it to register
// any datasource actions
const instanceId = generate()
// Instance ID is unique to each instance of a provider
let instanceId
// Keep previous state around so we can avoid updating unless necessary
let lastDataKey
let lastActionsKey
// Add actions context
$: {
if (instanceId) {
actions?.forEach(({ type, callback, metadata }) => {
$: provideData(data)
$: provideActions(actions, instanceId)
const provideData = newData => {
const dataKey = JSON.stringify(newData)
if (dataKey !== lastDataKey) {
newContext.actions.provideData(providerKey, newData)
lastDataKey = dataKey
}
}
const provideActions = newActions => {
const actionsKey = JSON.stringify(newActions)
if (actionsKey !== lastActionsKey) {
lastActionsKey = actionsKey
newActions?.forEach(({ type, callback, metadata }) => {
newContext.actions.provideAction(providerKey, type, callback)
// Register any "refresh datasource" actions with a singleton store
@ -43,10 +57,6 @@
}
onMount(() => {
// Generate a permanent unique ID for this component and use it to register
// any datasource actions
instanceId = generate()
// Unregister all datasource instances when unmounting this provider
return () => dataSourceStore.actions.unregisterInstance(instanceId)
})

41
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -1,6 +1,8 @@
<script>
import { onMount, onDestroy } from "svelte"
import SettingsButton from "./SettingsButton.svelte"
import SettingsColorPicker from "./SettingsColorPicker.svelte"
import SettingsPicker from "./SettingsPicker.svelte"
import { builderStore } from "../../store"
import { domDebounce } from "../../utils/domDebounce"
@ -87,19 +89,44 @@
>
{#each settings as setting, idx}
{#if setting.type === "select"}
{#each setting.options as option}
<SettingsButton
{#if setting.barStyle === "buttons"}
{#each setting.options as option}
<SettingsButton
prop={setting.key}
value={option.value}
icon={option.barIcon}
title={option.barTitle}
/>
{/each}
{:else}
<SettingsPicker
prop={setting.key}
value={option.value}
icon={option.barIcon}
title={option.barTitle}
options={setting.options}
label={setting.label}
/>
{/each}
{/if}
{:else if setting.type === "boolean"}
<SettingsButton
prop={setting.key}
icon={setting.barIcon}
title={setting.barTitle}
bool
/>
{:else if setting.type === "color"}
<SettingsColorPicker prop={setting.key} />
{/if}
{#if idx < settings.length - 1}
{#if setting.barSeparator !== false}
<div class="divider" />
{/if}
{/each}
<SettingsButton
icon="Delete"
on:click={() => {
builderStore.actions.deleteComponent(
$builderStore.selectedComponent._id
)
}}
/>
</div>
{/if}

3
packages/client/src/components/preview/SettingsButton.svelte
View File

@ -1,6 +1,7 @@
<script>
import { Icon } from "@budibase/bbui"
import { builderStore } from "../../store"
import { createEventDispatcher } from "svelte"
export let prop
export let value
@ -9,6 +10,7 @@
export let rotate = false
export let bool = false
const dispatch = createEventDispatcher()
$: currentValue = $builderStore.selectedComponent?.[prop]
$: active = prop && (bool ? !!currentValue : currentValue === value)
</script>
@ -22,6 +24,7 @@
const newValue = bool ? !currentValue : value
builderStore.actions.updateProp(prop, newValue)
}
dispatch("click")
}}
>
<Icon name={icon} size="S" />

26
packages/client/src/components/preview/SettingsColorPicker.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import { ColorPicker } from "@budibase/bbui"
import { builderStore } from "../../store"
export let prop
$: currentValue = $builderStore.selectedComponent?.[prop]
</script>
<div>
<ColorPicker
size="S"
value={currentValue}
on:change={e => {
if (prop) {
builderStore.actions.updateProp(prop, e.detail)
}
}}
/>
</div>
<style>
div {
padding: 0 4px;
}
</style>

31
packages/client/src/components/preview/SettingsPicker.svelte Normal file
View File

@ -0,0 +1,31 @@
<script>
import { Select } from "@budibase/bbui"
import { builderStore } from "../../store"
export let prop
export let options
export let label
$: currentValue = $builderStore.selectedComponent?.[prop]
</script>
<div>
<Select
quiet
autoWidth
placeholder={label}
{options}
value={currentValue}
on:change={e => {
if (prop) {
builderStore.actions.updateProp(prop, e.detail)
}
}}
/>
</div>
<style>
div {
padding: 0 4px;
}
</style>

7
packages/client/src/store/builder.js
View File

@ -56,13 +56,14 @@ const createBuilderStore = () => {
const actions = {
selectComponent: id => {
if (id) {
dispatchEvent("select-component", { id })
}
dispatchEvent("select-component", { id })
},
updateProp: (prop, value) => {
dispatchEvent("update-prop", { prop, value })
},
deleteComponent: id => {
dispatchEvent("delete-component", { id })
},
}
return {
...writableStore,

16
packages/client/src/store/context.js
View File

@ -4,7 +4,21 @@ export const createContextStore = oldContext => {
const newContext = writable({})
const contexts = oldContext ? [oldContext, newContext] : [newContext]
const totalContext = derived(contexts, $contexts => {
return $contexts.reduce((total, context) => ({ ...total, ...context }), {})
// The key is the serialized representation of context
let key = ""
for (let i = 0; i < $contexts.length - 1; i++) {
key += $contexts[i].key
}
key += JSON.stringify($contexts[$contexts.length - 1])
// Reduce global state
const reducer = (total, context) => ({ ...total, ...context })
const context = $contexts.reduce(reducer, {})
return {
...context,
key,
}
})
// Adds a data context layer to the tree

10
packages/client/src/utils/buttonActions.js
View File

@ -31,8 +31,14 @@ const triggerAutomationHandler = async action => {
}
const navigationHandler = action => {
if (action.parameters.url) {
routeStore.actions.navigate(action.parameters.url)
const { url } = action.parameters
if (url) {
const external = !url.startsWith("/")
if (external) {
window.location.href = url
} else {
routeStore.actions.navigate(action.parameters.url)
}
}
}

10
packages/client/src/utils/componentProps.js
View File

@ -22,14 +22,6 @@ export const propsAreSame = (a, b) => {
* Data bindings are enriched, and button actions are enriched.
*/
export const enrichProps = (props, context) => {
// 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 totalContext = {
@ -41,7 +33,7 @@ export const enrichProps = (props, context) => {
}
// Enrich all data bindings in top level props
let enrichedProps = enrichDataBindings(validProps, totalContext)
let enrichedProps = enrichDataBindings(props, totalContext)
// Enrich click actions if they exist
if (enrichedProps.onClick) {

6
packages/client/src/utils/styleable.js
View File

@ -31,6 +31,12 @@ export const styleable = (node, styles = {}) => {
if (newStyles.empty) {
baseStyles.border = "2px dashed var(--grey-5)"
baseStyles.padding = "var(--spacing-l)"
baseStyles.overflow = "hidden"
}
// Append border-style css if border-width is specified
if (newStyles.normal?.["border-width"]) {
baseStyles["border-style"] = "solid"
}
const componentId = newStyles.id

1
packages/server/src/api/controllers/layout.js
View File

@ -14,6 +14,7 @@ exports.save = async function (ctx) {
...EMPTY_LAYOUT,
...layout,
}
layout.props._instanceName = layout.name
}
layout._id = layout._id || generateLayoutID()

2
packages/server/src/constants/layouts.js
View File

@ -57,6 +57,7 @@ const BASE_LAYOUTS = [
name: "Navigation Layout",
props: {
_id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
_instanceName: "Navigation Layout",
_component: "@budibase/standard-components/layout",
_children: [
{
@ -102,6 +103,7 @@ const BASE_LAYOUTS = [
name: "Empty Layout",
props: {
_id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
_instanceName: "Empty Layout",
_component: "@budibase/standard-components/layout",
_children: [
{

7
packages/server/src/constants/screens.js
View File

@ -20,15 +20,13 @@ exports.createHomeScreen = () => ({
_id: "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
_component: "@budibase/standard-components/heading",
_styles: {
normal: {
"text-align": "left",
},
hover: {},
active: {},
selected: {},
},
text: "Welcome to your Budibase App 👋",
type: "h2",
size: "M",
align: "left",
_instanceName: "Heading",
_children: [],
},
@ -38,6 +36,7 @@ exports.createHomeScreen = () => ({
hAlign: "stretch",
vAlign: "top",
size: "grow",
gap: "M",
},
routing: {
route: "/",

2
packages/server/tsconfig.json
View File

@ -1,6 +1,6 @@
{
"compilerOptions": {
"target": "es5",
"target": "es6",
"module": "commonjs",
"lib": ["es6"],
"allowJs": true,

411
packages/standard-components/manifest.json
View File

@ -4,8 +4,7 @@
"description": "This component is specific only to layouts",
"icon": "Sandbox",
"hasChildren": true,
"styleable": true,
"illegalChildren": [],
"styles": ["padding", "background"],
"settings": [
{
"type": "text",
@ -61,14 +60,15 @@
"description": "This component contains things within itself",
"icon": "Sandbox",
"hasChildren": true,
"styleable": true,
"showSettingsBar": true,
"styles": ["padding", "size", "background", "border", "shadow"],
"settings": [
{
"type": "select",
"label": "Direction",
"key": "direction",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Column",
@ -90,6 +90,7 @@
"label": "Horiz. Align",
"key": "hAlign",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Left",
@ -122,7 +123,8 @@
"type": "select",
"label": "Vert. Align",
"key": "vAlign",
"showInBar": "true",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Top",
@ -156,6 +158,7 @@
"label": "Size",
"key": "size",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Shrink",
@ -171,6 +174,40 @@
}
],
"defaultValue": "shrink"
},
{
"type": "select",
"label": "Gap",
"key": "gap",
"showInBar": true,
"barStyle": "picker",
"options": [
{
"label": "None",
"value": "N"
},
{
"label": "Small",
"value": "S"
},
{
"label": "Medium",
"value": "M"
},
{
"label": "Large",
"value": "L"
}
],
"defaultValue": "M"
},
{
"type": "boolean",
"label": "Wrap",
"key": "wrap",
"showInBar": true,
"barIcon": "ModernGridView",
"barTitle": "Wrap"
}
]
},
@ -179,7 +216,6 @@
"description": "Add a section to your application",
"icon": "ColumnTwoB",
"hasChildren": true,
"styleable": true,
"illegalChildren": ["section"],
"showEmptyState": false,
"settings": [
@ -194,15 +230,13 @@
"screenslot": {
"name": "Screenslot",
"icon": "WebPage",
"description": "Contains your app screens",
"styleable": true
"description": "Contains your app screens"
},
"button": {
"name": "Button",
"description": "A basic html button that is ready for styling",
"icon": "Button",
"illegalChildren": ["section"],
"styleable": true,
"settings": [
{
"type": "text",
@ -211,16 +245,49 @@
},
{
"type": "select",
"label": "Button Type",
"label": "Variant",
"key": "type",
"options": ["primary", "secondary", "cta", "warning"],
"options": [
{
"label": "Primary",
"value": "primary"
}, {
"label": "Secondary",
"value": "secondary"
},
{
"label": "Action",
"value": "cta"
},
{
"label": "Warning",
"value": "warning"
}
],
"defaultValue": "primary"
},
{
"type": "select",
"label": "Size",
"key": "size",
"options": ["S", "M", "L", "XL"],
"options": [
{
"label": "Small",
"value": "S"
},
{
"label": "Medium",
"value": "M"
},
{
"label": "Large",
"value": "L"
},
{
"label": "Extra large",
"value": "XL"
}
],
"defaultValue": "M"
},
{
@ -239,7 +306,6 @@
"name": "Repeater",
"description": "A configurable data list that attaches to your backend tables.",
"icon": "ViewList",
"styleable": true,
"illegalChildren": ["section"],
"hasChildren": true,
"showSettingsBar": true,
@ -265,6 +331,7 @@
"label": "Direction",
"key": "direction",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Column",
@ -286,6 +353,7 @@
"label": "Horiz. Align",
"key": "hAlign",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Left",
@ -318,7 +386,8 @@
"type": "select",
"label": "Vert. Align",
"key": "vAlign",
"showInBar": "true",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Top",
@ -346,6 +415,32 @@
}
],
"defaultValue": "top"
},
{
"type": "select",
"label": "Gap",
"key": "gap",
"showInBar": true,
"barStyle": "picker",
"options": [
{
"label": "None",
"value": "N"
},
{
"label": "Small",
"value": "S"
},
{
"label": "Medium",
"value": "M"
},
{
"label": "Large",
"value": "L"
}
],
"defaultValue": "M"
}
],
"context": {
@ -356,7 +451,6 @@
"name": "Stacked List",
"icon": "TaskList",
"description": "A basic card component that can contain content and actions.",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -386,7 +480,6 @@
"name": "Vertical Card",
"description": "A basic card component that can contain content and actions.",
"icon": "ViewColumn",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -447,13 +540,93 @@
"name": "Paragraph",
"description": "A component for displaying paragraph text.",
"icon": "TextParagraph",
"styleable": true,
"illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
"type": "text",
"label": "Text",
"key": "text"
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "M",
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Small",
"value": "S"
}, {
"label": "Medium",
"value": "M"
}, {
"label": "Large",
"value": "L"
}]
},
{
"type": "color",
"label": "Color",
"key": "color",
"showInBar": true,
"barSeparator": false
},
{
"type": "boolean",
"label": "Bold",
"key": "bold",
"showInBar": true,
"barIcon": "TagBold",
"barTitle": "Bold text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Italic",
"key": "italic",
"showInBar": true,
"barIcon": "TagItalic",
"barTitle": "Italic text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Underline",
"key": "underline",
"showInBar": true,
"barIcon": "TagUnderline",
"barTitle": "Underline text"
},
{
"type": "select",
"label": "Alignment",
"key": "align",
"defaultValue": "left",
"showInBar": true,
"barStyle": "buttons",
"options": [{
"label": "Left",
"value": "left",
"barIcon": "TextAlignLeft",
"barTitle": "Align left"
}, {
"label": "Center",
"value": "center",
"barIcon": "TextAlignCenter",
"barTitle": "Align center"
}, {
"label": "Right",
"value": "right",
"barIcon": "TextAlignRight",
"barTitle": "Align right"
}, {
"label": "Justify",
"value": "justify",
"barIcon": "TextAlignJustify",
"barTitle": "Justify text"
}]
}
]
},
@ -461,8 +634,8 @@
"name": "Headline",
"icon": "TextBold",
"description": "A component for displaying heading text",
"styleable": true,
"illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
"type": "text",
@ -471,10 +644,83 @@
},
{
"type": "select",
"key": "type",
"label": "Type",
"options": ["h1", "h2", "h3", "h4", "h5", "h6"],
"defaultValue": "h1"
"label": "Size",
"key": "size",
"defaultValue": "M",
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Small",
"value": "S"
}, {
"label": "Medium",
"value": "M"
}, {
"label": "Large",
"value": "L"
}]
},
{
"type": "color",
"label": "Color",
"key": "color",
"showInBar": true,
"barSeparator": false
},
{
"type": "boolean",
"label": "Bold",
"key": "bold",
"showInBar": true,
"barIcon": "TagBold",
"barTitle": "Bold text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Italic",
"key": "italic",
"showInBar": true,
"barIcon": "TagItalic",
"barTitle": "Italic text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Underline",
"key": "underline",
"showInBar": true,
"barIcon": "TagUnderline",
"barTitle": "Underline text"
},
{
"type": "select",
"label": "Alignment",
"key": "align",
"defaultValue": "left",
"showInBar": true,
"barStyle": "buttons",
"options": [{
"label": "Left",
"value": "left",
"barIcon": "TextAlignLeft",
"barTitle": "Align left"
}, {
"label": "Center",
"value": "center",
"barIcon": "TextAlignCenter",
"barTitle": "Align center"
}, {
"label": "Right",
"value": "right",
"barIcon": "TextAlignRight",
"barTitle": "Align right"
}, {
"label": "Justify",
"value": "justify",
"barIcon": "TextAlignJustify",
"barTitle": "Justify text"
}]
}
]
},
@ -482,8 +728,8 @@
"name": "Image",
"description": "A basic component for displaying images",
"icon": "Image",
"styleable": true,
"illegalChildren": ["section"],
"styles": ["size"],
"settings": [
{
"type": "text",
@ -496,7 +742,7 @@
"name": "Background Image",
"description": "A background image",
"icon": "Images",
"styleable": true,
"styles": ["size"],
"illegalChildren": ["section"],
"settings": [
{
@ -554,7 +800,6 @@
"name": "Icon",
"description": "A basic component for displaying icons",
"icon": "Bell",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -602,7 +847,6 @@
"name": "Nav Bar",
"description": "A component for handling the navigation within your app.",
"icon": "BreadcrumbNavigation",
"styleable": true,
"illegalChildren": ["section"],
"hasChildren": true,
"settings": [
@ -623,7 +867,7 @@
"name": "Link",
"description": "A basic link component for internal and external links",
"icon": "Link",
"styleable": true,
"showSettingsBar": true,
"illegalChildren": ["section"],
"settings": [
{
@ -642,10 +886,85 @@
"label": "New Tab",
"key": "openInNewTab"
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "M",
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Small",
"value": "S"
}, {
"label": "Medium",
"value": "M"
}, {
"label": "Large",
"value": "L"
}]
},
{
"type": "color",
"label": "Color",
"key": "color",
"showInBar": true,
"barSeparator": false
},
{
"type": "boolean",
"label": "External",
"key": "external"
"label": "Bold",
"key": "bold",
"showInBar": true,
"barIcon": "TagBold",
"barTitle": "Bold text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Italic",
"key": "italic",
"showInBar": true,
"barIcon": "TagItalic",
"barTitle": "Italic text",
"barSeparator": false
},
{
"type": "boolean",
"label": "Underline",
"key": "underline",
"showInBar": true,
"barIcon": "TagUnderline",
"barTitle": "Underline text"
},
{
"type": "select",
"label": "Alignment",
"key": "align",
"defaultValue": "left",
"showInBar": true,
"barStyle": "buttons",
"options": [{
"label": "Left",
"value": "left",
"barIcon": "TextAlignLeft",
"barTitle": "Align left"
}, {
"label": "Center",
"value": "center",
"barIcon": "TextAlignCenter",
"barTitle": "Align center"
}, {
"label": "Right",
"value": "right",
"barIcon": "TextAlignRight",
"barTitle": "Align right"
}, {
"label": "Justify",
"value": "justify",
"barIcon": "TextAlignJustify",
"barTitle": "Justify text"
}]
}
]
},
@ -653,7 +972,6 @@
"name": "Horizontal Card",
"description": "A basic card component that can contain content and actions.",
"icon": "ViewRow",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -726,7 +1044,6 @@
"name": "Stat Card",
"description": "A card component for displaying numbers.",
"icon": "Card",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -753,8 +1070,8 @@
"name": "Embed",
"icon": "Code",
"description": "Embed content from 3rd party sources",
"styleable": true,
"illegalChildren": ["section"],
"styles": ["size"],
"settings": [
{
"type": "text",
@ -767,7 +1084,6 @@
"name": "Bar Chart",
"description": "Bar chart",
"icon": "GraphBarVertical",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -868,7 +1184,6 @@
"name": "Line Chart",
"description": "Line chart",
"icon": "GraphTrend",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -970,7 +1285,6 @@
"name": "Area Chart",
"description": "Line chart",
"icon": "GraphAreaStacked",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1084,7 +1398,6 @@
"name": "Pie Chart",
"description": "Pie chart",
"icon": "GraphPie",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1162,7 +1475,6 @@
"name": "Donut Chart",
"description": "Donut chart",
"icon": "GraphDonut",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1240,7 +1552,6 @@
"name": "Candlestick Chart",
"description": "Candlestick chart",
"icon": "GraphBarVerticalStacked",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1322,7 +1633,6 @@
"form": {
"name": "Form",
"icon": "Form",
"styleable": true,
"hasChildren": true,
"illegalChildren": ["section"],
"actions": [
@ -1395,7 +1705,6 @@
"fieldgroup": {
"name": "Field Group",
"icon": "Group",
"styleable": true,
"illegalChildren": ["section"],
"hasChildren": true,
"settings": [
@ -1424,7 +1733,6 @@
"stringfield": {
"name": "Text Field",
"icon": "Text",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1453,7 +1761,6 @@
"numberfield": {
"name": "Number Field",
"icon": "123",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1482,7 +1789,6 @@
"passwordfield": {
"name": "Password Field",
"icon": "LockClosed",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1511,7 +1817,6 @@
"optionsfield": {
"name": "Options Picker",
"icon": "ViewList",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1541,7 +1846,6 @@
"booleanfield": {
"name": "Checkbox",
"icon": "Checkmark",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1570,7 +1874,6 @@
"longformfield": {
"name": "Rich Text",
"icon": "TextParagraph",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1600,7 +1903,6 @@
"datetimefield": {
"name": "Date Picker",
"icon": "DateInput",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1635,7 +1937,6 @@
"attachmentfield": {
"name": "Attachment",
"icon": "Attach",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1659,7 +1960,6 @@
"relationshipfield": {
"name": "Relationship Picker",
"icon": "TaskList",
"styleable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1689,7 +1989,6 @@
"name": "Data Provider",
"info": "Pagination is only available for data stored in internal tables.",
"icon": "Data",
"styleable": false,
"illegalChildren": ["section"],
"hasChildren": true,
"settings": [
@ -1753,7 +2052,6 @@
"table": {
"name": "Table",
"icon": "Table",
"styleable": true,
"illegalChildren": ["section"],
"hasChildren": true,
"showEmptyState": false,
@ -1809,11 +2107,6 @@
}
]
},
{
"type": "boolean",
"label": "Quiet",
"key": "quiet"
},
{
"type": "multifield",
"label": "Columns",
@ -1823,7 +2116,12 @@
},
{
"type": "boolean",
"label": "Auto Cols.",
"label": "Quiet",
"key": "quiet"
},
{
"type": "boolean",
"label": "Auto Columns",
"key": "showAutoColumns",
"defaultValue": false
}
@ -1835,7 +2133,6 @@
"daterangepicker": {
"name": "Date Range",
"icon": "Date",
"styleable": true,
"hasChildren": false,
"info": "Your data provider will be automatically filtered to the given date range.",
"settings": [

25
packages/standard-components/src/BackgroundImage.svelte
View File

@ -1,7 +1,8 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let url
@ -18,13 +19,24 @@
}
</script>
<div class="outer" use:styleable={$component.styles}>
<div class="inner" {style} />
</div>
{#if url}
<div class="outer" use:styleable={$component.styles}>
<div class="inner" {style} />
</div>
{:else if $builderStore.inBuilder}
<div
class="placeholder"
use:styleable={{ ...$component.styles, empty: true }}
>
<Placeholder />
</div>
{/if}
<style>
.outer {
position: relative;
width: 100%;
height: 400px;
}
.inner {
@ -35,4 +47,9 @@
background-size: cover;
background-position: center center;
}
.placeholder {
display: grid;
place-items: center;
}
</style>

7
packages/standard-components/src/Button.svelte
View File

@ -19,3 +19,10 @@
>
{text || ""}
</button>
<style>
button {
width: fit-content;
width: -moz-fit-content;
}
</style>

29
packages/standard-components/src/Container.svelte
View File

@ -8,17 +8,24 @@
export let hAlign
export let vAlign
export let size
export let gap
export let wrap
$: directionClass = direction ? `valid-container direction-${direction}` : ""
$: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
$: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
$: sizeClass = size ? `size-${size}` : ""
$: gapClass = gap ? `gap-${gap}` : ""
$: classNames = [
directionClass,
hAlignClass,
vAlignClass,
sizeClass,
gapClass,
].join(" ")
</script>
<div
class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
use:styleable={$component.styles}
>
<div class={classNames} use:styleable={$component.styles} class:wrap>
<slot />
</div>
@ -83,4 +90,18 @@
.direction-column.hAlign-stretch {
align-items: stretch;
}
.gap-S {
gap: 8px;
}
.gap-M {
gap: 16px;
}
.gap-L {
gap: 32px;
}
.wrap {
flex-wrap: wrap;
}
</style>

20
packages/standard-components/src/Embed.svelte
View File

@ -1,23 +1,29 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let embed
</script>
<div use:styleable={$component.styles}>
{@html embed}
</div>
{#if embed}
<div class="embed" use:styleable={$component.styles}>
{@html embed}
</div>
{:else if $builderStore.inBuilder}
<div use:styleable={{ ...$component.styles, empty: true }}>
<Placeholder />
</div>
{/if}
<style>
div {
.embed {
position: relative;
}
div :global(> *) {
.embed :global(> *) {
width: 100%;
height: 100%;
position: absolute;
}
</style>

85
packages/standard-components/src/Heading.svelte
View File

@ -4,41 +4,84 @@
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let type
export let text
export let color
export let align
export let bold
export let italic
export let underline
export let size
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder text"
: text || ""
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = {
...$component.styles,
normal: {
...$component.styles?.normal,
color,
},
}
</script>
{#if type === "h1"}
<h1 class:placeholder use:styleable={$component.styles}>{componentText}</h1>
{:else if type === "h2"}
<h2 class:placeholder use:styleable={$component.styles}>{componentText}</h2>
{:else if type === "h3"}
<h3 class:placeholder use:styleable={$component.styles}>{componentText}</h3>
{:else if type === "h4"}
<h4 class:placeholder use:styleable={$component.styles}>{componentText}</h4>
{:else if type === "h5"}
<h5 class:placeholder use:styleable={$component.styles}>{componentText}</h5>
{:else if type === "h6"}
<h6 class:placeholder use:styleable={$component.styles}>{componentText}</h6>
{/if}
<h1
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
>
{#if bold}
<strong>{componentText}</strong>
{:else}
{componentText}
{/if}
</h1>
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
h1 {
display: inline-block;
white-space: pre-wrap;
font-weight: 600;
margin: 0;
}
.placeholder {
font-style: italic;
color: var(--grey-6);
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.size--S {
font-size: 18px;
}
.size--M {
font-size: 22px;
}
.size--L {
font-size: 28px;
}
.align--left {
text-align: left;
}
.align--center {
text-align: center;
}
.align--right {
text-align: right;
}
.align-justify {
text-align: justify;
}
</style>

34
packages/standard-components/src/Image.svelte
View File

@ -1,21 +1,27 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let className = ""
export let url = ""
export let description = ""
export let height
export let width
export let url
</script>
<img
{height}
{width}
class={className}
src={url}
alt={description}
use:styleable={$component.styles}
/>
{#if url}
<img src={url} alt={$component.name} use:styleable={$component.styles} />
{:else if $builderStore.inBuilder}
<div
class="placeholder"
use:styleable={{ ...$component.styles, empty: true }}
>
<Placeholder />
</div>
{/if}
<style>
.placeholder {
display: grid;
place-items: center;
}
</style>

5
packages/standard-components/src/Layout.svelte
View File

@ -123,6 +123,8 @@
align-items: stretch;
height: 100%;
overflow: auto;
overflow-x: hidden;
position: relative;
}
.nav-wrapper {
@ -131,7 +133,7 @@
justify-content: center;
align-items: stretch;
background: white;
z-index: 1;
z-index: 2;
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
}
.layout--top .nav-wrapper.sticky {
@ -163,6 +165,7 @@
justify-content: center;
align-items: stretch;
flex: 1 1 auto;
z-index: 1;
}
.main {
display: flex;

104
packages/standard-components/src/Link.svelte
View File

@ -1,31 +1,105 @@
<script>
import { getContext } from "svelte"
const { linkable, styleable } = getContext("sdk")
const { linkable, styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let url = ""
export let text = ""
export let openInNewTab = false
export let external = false
export let url
export let text
export let openInNewTab
export let color
export let align
export let bold
export let italic
export let underline
export let size
$: external = url && !url.startsWith("/")
$: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder link"
: text || ""
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = {
...$component.styles,
normal: {
...$component.styles?.normal,
color,
},
}
</script>
{#if external}
<a href={url || "/"} {target} use:styleable={$component.styles}>
{text}
<slot />
</a>
{:else}
<a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
{text}
<slot />
</a>
{#if $builderStore.inBuilder || componentText}
{#if external}
<a
{target}
href={url || "/"}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
>
{componentText}
</a>
{:else}
<a
use:linkable
href={url || "/"}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
>
{componentText}
</a>
{/if}
{/if}
<style>
a {
color: var(--spectrum-alias-text-color);
display: inline-block;
white-space: pre-wrap;
}
.placeholder {
font-style: italic;
color: var(--grey-6);
}
.bold {
font-weight: 600;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.size--S {
font-size: 14px;
}
.size--M {
font-size: 16px;
}
.size--L {
font-size: 18px;
}
.align--left {
text-align: left;
}
.align--center {
text-align: center;
}
.align--right {
text-align: right;
}
.align-justify {
text-align: justify;
}
</style>

4
packages/standard-components/src/Placeholder.svelte
View File

@ -4,12 +4,12 @@
const { builderStore } = getContext("sdk")
const component = getContext("component")
export let text = $component.name || "Placeholder"
export let text
</script>
{#if $builderStore.inBuilder}
<div>
{text}
{text || $component.name || "Placeholder"}
</div>
{/if}

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

@ -8,6 +8,7 @@
export let direction
export let hAlign
export let vAlign
export let gap
const { Provider } = getContext("sdk")
const component = getContext("component")
@ -16,7 +17,7 @@
$: loaded = dataProvider?.loaded ?? true
</script>
<Container {direction} {hAlign} {vAlign}>
<Container {direction} {hAlign} {vAlign} {gap} wrap>
{#if $component.empty}
<Placeholder />
{:else if rows.length > 0}

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

@ -5,14 +5,37 @@
const component = getContext("component")
export let text
export let color
export let align
export let bold
export let italic
export let underline
export let size
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder text"
: text || ""
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = {
...$component.styles,
normal: {
...$component.styles?.normal,
color,
},
}
</script>
<p use:styleable={$component.styles} class:placeholder>
<p
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
>
{componentText}
</p>
@ -20,10 +43,40 @@
p {
display: inline-block;
white-space: pre-wrap;
margin: 0;
}
.placeholder {
font-style: italic;
color: var(--grey-6);
}
.bold {
font-weight: 600;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.size--S {
font-size: 14px;
}
.size--M {
font-size: 16px;
}
.size--L {
font-size: 18px;
}
.align--left {
text-align: left;
}
.align--center {
text-align: center;
}
.align--right {
text-align: right;
}
.align-justify {
text-align: justify;
}
</style>

2
packages/standard-components/src/charts/BarChart.svelte
View File

@ -21,7 +21,7 @@
const setUpChart = provider => {
const allCols = [labelColumn, ...(valueColumns || [null])]
if (!provider || allCols.find(x => x == null)) {
if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
return null
}

2
packages/standard-components/src/charts/CandleStickChart.svelte
View File

@ -21,7 +21,7 @@
// Fetch data on mount
const setUpChart = provider => {
const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
if (!provider || allCols.find(x => x == null)) {
if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
return null
}

2
packages/standard-components/src/charts/LineChart.svelte
View File

@ -28,7 +28,7 @@
// Fetch data on mount
const setUpChart = provider => {
const allCols = [labelColumn, ...(valueColumns || [null])]
if (!provider || allCols.find(x => x == null)) {
if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
return null
}

2
packages/standard-components/src/charts/PieChart.svelte
View File

@ -18,7 +18,7 @@
// Fetch data on mount
const setUpChart = provider => {
if (!provider || !labelColumn || !valueColumn) {
if (!provider || !provider.rows?.length || !labelColumn || !valueColumn) {
return null
}

7
packages/string-templates/src/index.cjs
View File

@ -92,8 +92,6 @@ module.exports.processStringSync = (string, context) => {
}
// take a copy of input incase error
const input = string
const clonedContext = removeNull(updateContext(cloneDeep(context)))
// remove any null/undefined properties
if (typeof string !== "string") {
throw "Cannot process non-string types."
}
@ -103,7 +101,10 @@ module.exports.processStringSync = (string, context) => {
const template = hbsInstance.compile(string, {
strict: false,
})
return processors.postprocess(template(clonedContext))
return processors.postprocess(template({
now: new Date().toISOString(),
...context,
}))
} catch (err) {
return removeHandlebarsStatements(input)
}

33
packages/string-templates/src/utilities.js
View File

@ -1,4 +1,3 @@
const _ = require("lodash")
const ALPHA_NUMERIC_REGEX = /^[A-Za-z0-9]+$/g
module.exports.FIND_HBS_REGEX = /{{([^{].*?)}}/g
@ -11,38 +10,6 @@ module.exports.swapStrings = (string, start, length, swap) => {
return string.slice(0, start) + swap + string.slice(start + length)
}
// removes null and undefined
module.exports.removeNull = obj => {
obj = _(obj).omitBy(_.isUndefined).omitBy(_.isNull).value()
for (let [key, value] of Object.entries(obj)) {
// only objects
if (typeof value === "object" && !Array.isArray(value)) {
obj[key] = module.exports.removeNull(value)
}
}
return obj
}
module.exports.updateContext = obj => {
if (obj.now == null) {
obj.now = new Date().toISOString()
}
function recurse(obj) {
for (let key of Object.keys(obj)) {
if (!obj[key]) {
continue
}
if (obj[key] instanceof Date) {
obj[key] = obj[key].toISOString()
} else if (typeof obj[key] === "object") {
obj[key] = recurse(obj[key])
}
}
return obj
}
return recurse(obj)
}
module.exports.removeHandlebarsStatements = string => {
let regexp = new RegExp(exports.FIND_HBS_REGEX)
let matches = string.match(regexp)

2
packages/string-templates/test/basic.spec.js
View File

@ -111,7 +111,7 @@ describe("check the utility functions", () => {
it("should be able to handle an input date object", async () => {
const date = new Date()
const output = await processString("{{ dateObj }}", { dateObj: date })
expect(date.toISOString()).toEqual(output)
expect(date.toString()).toEqual(output)
})
})