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

Merge pull request #3403 from Budibase/cheeks-lab-day 

Inline text editing + perf. enhancements + preview enhancements
This commit is contained in:
Andrew Kingston 2021-11-22 10:44:38 +00:00 committed by GitHub
parent fe5c3d78f4 e35fe3685f
commit 6c0a1e99da
29 changed files with 490 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -620,6 +620,9 @@ export const getFrontendStore = () => {
if (!name || !component) {
return
}
if (component[name] === value) {
return
}
component[name] = value
store.update(state => {
state.selectedComponentId = component._id

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

@ -36,11 +36,9 @@
// Messages that can be sent from the iframe preview to the builder
// Budibase events are and initalisation events
const MessageTypes = {
IFRAME_LOADED: "iframe-loaded",
READY: "ready",
ERROR: "error",
BUDIBASE: "type",
KEYDOWN: "keydown"
}
// Construct iframe template
@ -69,7 +67,7 @@
theme: $store.theme,
customTheme: $store.customTheme,
previewDevice: $store.previewDevice,
messagePassing: $store.clientFeatures.messagePassing
messagePassing: $store.clientFeatures.messagePassing,
}
// Saving pages and screens to the DB causes them to have _revs.
@ -111,7 +109,6 @@
loading = false
error = event.error || "An unknown error occurred"
},
[MessageTypes.KEYDOWN]: handleKeydownEvent
}
const messageHandler = handlers[message.data.type] || handleBudibaseEvent
@ -122,15 +119,24 @@
window.addEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) {
// Legacy - remove in later versions of BB
iframe.contentWindow.addEventListener("ready", () => {
receiveMessage({ data: { type: MessageTypes.READY }})
}, { once: true })
iframe.contentWindow.addEventListener("error", event => {
receiveMessage({ data: { type: MessageTypes.ERROR, error: event.detail }})
}, { once: true })
iframe.contentWindow.addEventListener(
"ready",
() => {
receiveMessage({ data: { type: MessageTypes.READY } })
},
{ once: true }
)
iframe.contentWindow.addEventListener(
"error",
event => {
receiveMessage({
data: { type: MessageTypes.ERROR, error: event.detail },
})
},
{ once: true }
)
// Add listener for events sent by client library in preview
iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
}
})
@ -140,14 +146,20 @@
window.removeEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) {
// Legacy - remove in later versions of BB
iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
iframe.contentWindow.removeEventListener(
"bb-event",
handleBudibaseEvent
)
}
}
})
const handleBudibaseEvent = event => {
const { type, data } = event.data || event.detail
if (!type) {
return
}
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
@ -183,19 +195,6 @@
}
}
const handleKeydownEvent = event => {
const { key } = event.data || event
if (
(key === "Delete" || key === "Backspace") &&
selectedComponentId &&
["input", "textarea"].indexOf(
iframe.contentWindow.document.activeElement?.tagName.toLowerCase()
) === -1
) {
confirmDeleteComponent(selectedComponentId)
}
}
const confirmDeleteComponent = componentId => {
idToDelete = componentId
confirmDeleteDialog.show()

5
packages/builder/src/components/design/AppPreview/iframeTemplate.js
View File

@ -84,7 +84,6 @@ export default `
if (window.loadBudibase) {
window.loadBudibase()
document.documentElement.classList.add("loaded")
window.parent.postMessage({ type: "iframe-loaded" })
} else {
throw "The client library couldn't be loaded"
}
@ -94,10 +93,6 @@ export default `
}
window.addEventListener("message", receiveMessage)
window.addEventListener("keydown", evt => {
window.parent.postMessage({ type: "keydown", key: event.key })
})
window.parent.postMessage({ type: "ready" })
</script>
</head>

8
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View File

@ -13,6 +13,12 @@
$: noChildrenAllowed = !component || !definition?.hasChildren
$: noPaste = !$store.componentToPaste
// "editable" has been repurposed for inline text editing.
// It remains here for legacy compatibility.
// Future components should define "static": true for indicate they should
// not show a context menu.
$: showMenu = definition?.editable !== false && definition?.static !== true
const moveUpComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id)
@ -69,7 +75,7 @@
}
</script>
{#if definition?.editable !== false}
{#if showMenu}
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />

2
packages/builder/src/pages/builder/app/[application]/data/index.svelte
View File

@ -7,7 +7,7 @@
let modal
$: setupComplete =
$datasources.list.find(x => (x._id = "bb_internal")).entities.length > 1 ||
$datasources.list.find(x => (x._id = "bb_internal"))?.entities.length > 1 ||
$datasources.list.length > 1
onMount(() => {

28
packages/client/manifest.json
View File

@ -240,13 +240,15 @@
"name": "Screenslot",
"icon": "WebPage",
"description": "Contains your app screens",
"editable": false
"static": true
},
"button": {
"name": "Button",
"description": "A basic html button that is ready for styling",
"icon": "Button",
"editable": true,
"illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
"type": "text",
@ -255,6 +257,7 @@
},
{
"type": "select",
"showInBar": true,
"label": "Variant",
"key": "type",
"options": [
@ -283,6 +286,7 @@
{
"type": "select",
"label": "Size",
"showInBar": true,
"key": "size",
"options": [
{
@ -307,11 +311,18 @@
{
"type": "boolean",
"label": "Quiet",
"key": "quiet"
"key": "quiet",
"showInBar": true,
"barIcon": "VisibilityOff",
"barTitle": "Quiet variant",
"barSeparator": false
},
{
"type": "boolean",
"label": "Disabled",
"showInBar": true,
"barIcon": "NoEdit",
"barTitle": "Disable button",
"key": "disabled"
},
{
@ -590,6 +601,7 @@
"icon": "TextParagraph",
"illegalChildren": ["section"],
"showSettingsBar": true,
"editable": true,
"settings": [
{
"type": "text",
@ -696,6 +708,7 @@
"description": "A component for displaying heading text",
"illegalChildren": ["section"],
"showSettingsBar": true,
"editable": true,
"settings": [
{
"type": "text",
@ -940,6 +953,7 @@
"description": "A basic link component for internal and external links",
"icon": "Link",
"showSettingsBar": true,
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1831,6 +1845,7 @@
"icon": "Text",
"illegalChildren": ["section"],
"styles": ["size"],
"editable": true,
"settings": [
{
"type": "field/string",
@ -1869,6 +1884,7 @@
"name": "Number Field",
"icon": "123",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1908,6 +1924,7 @@
"name": "Password Field",
"icon": "LockClosed",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -1947,6 +1964,7 @@
"name": "Options Picker",
"icon": "ViewList",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2070,6 +2088,7 @@
"name": "Multi-select Picker",
"icon": "ViewList",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2171,6 +2190,7 @@
"booleanfield": {
"name": "Checkbox",
"icon": "Checkmark",
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2234,6 +2254,7 @@
"name": "Rich Text",
"icon": "TextParagraph",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2274,6 +2295,7 @@
"name": "Date Picker",
"icon": "DateInput",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2319,6 +2341,7 @@
"name": "Attachment",
"icon": "Attach",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
@ -2348,6 +2371,7 @@
"name": "Relationship Picker",
"icon": "TaskList",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{

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

@ -1,5 +1,5 @@
<script>
import { writable } from "svelte/store"
import { writable, get } from "svelte/store"
import { setContext, onMount } from "svelte"
import { Layout, Heading, Body } from "@budibase/bbui"
import Component from "./Component.svelte"
@ -25,6 +25,7 @@
import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
import DNDHandler from "components/preview/DNDHandler.svelte"
import ErrorSVG from "builder/assets/error.svg"
import KeyboardManager from "components/preview/KeyboardManager.svelte"
// Provide contexts
setContext("sdk", SDK)
@ -39,7 +40,7 @@
await initialise()
await authStore.actions.fetchUser()
dataLoaded = true
if ($builderStore.inBuilder) {
if (get(builderStore).inBuilder) {
builderStore.actions.notifyLoaded()
} else {
builderStore.actions.pingEndUser()
@ -143,6 +144,7 @@
</UserBindingsProvider>
{/if}
</div>
<KeyboardManager />
{/if}
<style>

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

@ -4,7 +4,7 @@
<script>
import { getContext, setContext } from "svelte"
import { writable, get } from "svelte/store"
import { writable } from "svelte/store"
import * as AppComponents from "components/app"
import Router from "./Router.svelte"
import { enrichProps, propsAreSame } from "utils/componentProps"
@ -19,15 +19,22 @@
export let isScreen = false
export let isBlock = false
// Component settings are the un-enriched settings for this component that
// need to be enriched at this level.
// Nested settings are the un-enriched block settings that are to be passed on
// and enriched at a deeper level.
let componentSettings
let nestedSettings
// The enriched component settings
let enrichedSettings
// Any prop overrides that need to be applied due to conditional UI
// Any setting overrides that need to be applied due to conditional UI
let conditionalSettings
// Settings are hashed when inside the builder preview and used as a key,
// so that components fully remount whenever any settings change
let hash = 0
// Resultant cached settings which will be passed to the component instance.
// These are a combination of the enriched, nested and conditional settings.
let cachedSettings
// Latest timestamp that we started a props update.
// Due to enrichment now being async, we need to avoid overwriting newer
@ -63,6 +70,7 @@
$: selected =
$builderStore.inBuilder && $builderStore.selectedComponentId === id
$: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
$: inDragPath = inSelectedPath && $builderStore.editMode
// Interactive components can be selected, dragged and highlighted inside
// the builder preview
@ -70,7 +78,9 @@
$builderStore.inBuilder &&
($builderStore.previewType === "layout" || insideScreenslot) &&
!isBlock
$: draggable = interactive && !isLayout && !isScreen
$: editable = definition?.editable
$: editing = editable && selected && $builderStore.editMode
$: draggable = !inDragPath && interactive && !isLayout && !isScreen
$: droppable = interactive && !isLayout && !isScreen
// Empty components are those which accept children but do not have any.
@ -79,44 +89,39 @@
$: empty = interactive && !children.length && definition?.hasChildren
$: emptyState = empty && definition?.showEmptyState !== false
// Raw props are all props excluding internal props and children
// Raw settings are all settings excluding internal props and children
$: rawSettings = getRawSettings(instance)
$: instanceKey = hashString(JSON.stringify(rawSettings))
// Component settings are those which are intended for this component and
// which need to be enriched
$: componentSettings = getComponentSettings(rawSettings, settingsDefinition)
$: enrichComponentSettings(rawSettings, instanceKey, $context)
// Nested settings are those which are intended for child components inside
// blocks and which should not be enriched at this level
$: nestedSettings = getNestedSettings(rawSettings, settingsDefinition)
// Update and enrich component settings
$: updateSettings(rawSettings, instanceKey, settingsDefinition, $context)
// Evaluate conditional UI settings and store any component setting changes
// which need to be made
$: evaluateConditions(enrichedSettings?._conditions)
// Build up the final settings object to be passed to the component
$: settings = {
...enrichedSettings,
...nestedSettings,
...conditionalSettings,
}
// Render key is used when in the builder preview to fully remount
// components when settings are changed
$: renderKey = `${hash}-${emptyState}`
$: cacheSettings(enrichedSettings, nestedSettings, conditionalSettings)
// Update component context
$: componentStore.set({
id,
children: children.length,
styles: { ...instance._styles, id, empty: emptyState, interactive },
styles: {
...instance._styles,
id,
empty: emptyState,
interactive,
draggable,
editable,
},
empty: emptyState,
selected,
name,
editing,
})
// Extracts all settings from the component instance
const getRawSettings = instance => {
let validSettings = {}
Object.entries(instance)
@ -137,12 +142,14 @@
return AppComponents[name]
}
// Gets this component's definition from the manifest
const getComponentDefinition = component => {
const prefix = "@budibase/standard-components/"
const type = component?.replace(prefix, "")
return type ? Manifest[type] : null
}
// Gets the definition of this component's settings from the manifest
const getSettingsDefinition = definition => {
if (!definition) {
return []
@ -162,35 +169,50 @@
return settings
}
const getComponentSettings = (rawSettings, settingsDefinition) => {
let clone = { ...rawSettings }
settingsDefinition?.forEach(setting => {
if (setting.nested) {
delete clone[setting.key]
}
})
return clone
// Updates and enriches component settings when raw settings change
const updateSettings = (settings, key, settingsDefinition, context) => {
const instanceChanged = key !== lastInstanceKey
// Derive component and nested settings if the instance changed
if (instanceChanged) {
splitRawSettings(settings, settingsDefinition)
}
const getNestedSettings = (rawSettings, settingsDefinition) => {
let clone = { ...rawSettings }
// Enrich component settings
enrichComponentSettings(componentSettings, context, instanceChanged)
// Update instance key
if (instanceChanged) {
lastInstanceKey = key
}
}
// Splits the raw settings into those destined for the component itself
// and nexted settings for child components inside blocks
const splitRawSettings = (rawSettings, settingsDefinition) => {
let newComponentSettings = { ...rawSettings }
let newNestedSettings = { ...rawSettings }
settingsDefinition?.forEach(setting => {
if (!setting.nested) {
delete clone[setting.key]
if (setting.nested) {
delete newComponentSettings[setting.key]
} else {
delete newNestedSettings[setting.key]
}
})
return clone
componentSettings = newComponentSettings
nestedSettings = newNestedSettings
}
// Enriches any string component props using handlebars
const enrichComponentSettings = (rawSettings, instanceKey, context) => {
const instanceSame = instanceKey === lastInstanceKey
const contextSame = context.key === lastContextKey
const enrichComponentSettings = (rawSettings, context, instanceChanged) => {
const contextChanged = context.key !== lastContextKey
if (instanceSame && contextSame) {
// Skip enrichment if the context and instance are unchanged
if (!contextChanged) {
if (!instanceChanged) {
return
}
} else {
lastInstanceKey = instanceKey
lastContextKey = context.key
}
@ -206,31 +228,11 @@
return
}
// Update the component props.
// Most props are deeply compared so that svelte will only trigger reactive
// statements on props that have actually changed.
if (!newEnrichedSettings) {
return
}
let propsChanged = false
if (!enrichedSettings) {
enrichedSettings = {}
propsChanged = true
}
Object.keys(newEnrichedSettings).forEach(key => {
if (!propsAreSame(newEnrichedSettings[key], enrichedSettings[key])) {
propsChanged = true
enrichedSettings[key] = newEnrichedSettings[key]
}
})
// Update the hash if we're in the builder so we can fully remount this
// component
if (get(builderStore).inBuilder && propsChanged) {
hash = hashString(JSON.stringify(enrichedSettings))
}
enrichedSettings = newEnrichedSettings
}
// Evaluates the list of conditional UI conditions and determines any setting
// or visibility changes required
const evaluateConditions = conditions => {
if (!conditions?.length) {
return
@ -250,10 +252,25 @@
conditionalSettings = result.settingUpdates
visible = nextVisible
}
// Combines and caches all settings which will be passed to the component
// instance. Settings are aggressively memoized to avoid triggering svelte
// reactive statements as much as possible.
const cacheSettings = (enriched, nested, conditional) => {
const allSettings = { ...enriched, ...nested, ...conditional }
if (!cachedSettings) {
cachedSettings = allSettings
} else {
Object.keys(allSettings).forEach(key => {
if (!propsAreSame(allSettings[key], cachedSettings[key])) {
cachedSettings[key] = allSettings[key]
}
})
}
}
</script>
{#key renderKey}
{#if constructor && settings && (visible || inSelectedPath)}
{#if constructor && cachedSettings && (visible || inSelectedPath)}
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
<!-- and the performance matters for the selection indicators -->
<div
@ -262,11 +279,12 @@
class:droppable
class:empty
class:interactive
class:editing
class:block={isBlock}
data-id={id}
data-name={name}
>
<svelte:component this={constructor} {...settings}>
<svelte:component this={constructor} {...cachedSettings}>
{#if children.length}
{#each children as child (child._id)}
<svelte:self instance={child} />
@ -278,8 +296,7 @@
{/if}
</svelte:component>
</div>
{/if}
{/key}
{/if}
<style>
.component {
@ -291,4 +308,7 @@
.draggable :global(*:hover) {
cursor: grab;
}
.editing :global(*:hover) {
cursor: auto;
}
</style>

5
packages/client/src/components/CustomThemeWrapper.svelte
View File

@ -79,4 +79,9 @@
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
}
/* Remove border when editing contenteditable components */
:global(*[contenteditable="true"]:focus) {
outline: none;
}
</style>

25
packages/client/src/components/app/Button.svelte
View File

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import "@spectrum-css/button/dist/index-vars.css"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let disabled = false
@ -11,16 +11,35 @@
export let size = "M"
export let type = "primary"
export let quiet = false
let node
$: $component.editing && node?.focus()
$: componentText = getComponentText(text, $builderStore, $component)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || " "
}
return text || componentState.name || "Placeholder text"
}
const updateText = e => {
builderStore.actions.updateProp("text", e.target.textContent)
}
</script>
<button
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
class:spectrum-Button--quiet={quiet}
disabled={disabled || false}
{disabled}
use:styleable={$component.styles}
on:click={onClick}
contenteditable={$component.editing}
on:blur={$component.editing ? updateText : null}
bind:this={node}
>
{text || ""}
{componentText}
</button>
<style>

48
packages/client/src/components/app/DataProvider.svelte
View File

@ -34,12 +34,18 @@
let bookmarks = [null]
let pageNumber = 0
let query = null
let queryExtensions = {}
// Sorting can be overridden at run time, so we can't use the prop directly
let currentSortColumn = sortColumn
let currentSortOrder = sortOrder
$: query = buildLuceneQuery(filter)
// Reset the current sort state to props if props change
$: currentSortColumn = sortColumn
$: currentSortOrder = sortOrder
$: defaultQuery = buildLuceneQuery(filter)
$: extendQuery(defaultQuery, queryExtensions)
$: internalTable = dataSource?.type === "table"
$: nestedProvider = dataSource?.type === "provider"
$: hasNextPage = bookmarks[pageNumber + 1] != null
@ -91,8 +97,12 @@
metadata: { dataSource },
},
{
type: ActionTypes.SetDataProviderQuery,
callback: newQuery => (query = newQuery),
type: ActionTypes.AddDataProviderQueryExtension,
callback: addQueryExtension,
},
{
type: ActionTypes.RemoveDataProviderQueryExtension,
callback: removeQueryExtension,
},
{
type: ActionTypes.SetDataProviderSorting,
@ -264,6 +274,38 @@
pageNumber--
allRows = res.rows
}
const addQueryExtension = (key, operator, field, value) => {
if (!key || !operator || !field) {
return
}
const extension = { operator, field, value }
queryExtensions = { ...queryExtensions, [key]: extension }
}
const removeQueryExtension = key => {
if (!key) {
return
}
const newQueryExtensions = { ...queryExtensions }
delete newQueryExtensions[key]
queryExtensions = newQueryExtensions
}
const extendQuery = (defaultQuery, extensions) => {
const extensionValues = Object.values(extensions || {})
let extendedQuery = { ...defaultQuery }
extensionValues.forEach(({ operator, field, value }) => {
extendedQuery[operator] = {
...extendedQuery[operator],
[field]: value,
}
})
if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {
query = extendedQuery
}
}
</script>
<div use:styleable={$component.styles} class="container">

49
packages/client/src/components/app/DateRangePicker.svelte
View File

@ -3,7 +3,7 @@
import { getContext } from "svelte"
import dayjs from "dayjs"
import utc from "dayjs/plugin/utc"
import { onMount } from "svelte"
import { onDestroy } from "svelte"
dayjs.extend(utc)
@ -14,7 +14,14 @@
const component = getContext("component")
const { styleable, ActionTypes, getAction } = getContext("sdk")
const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery)
$: addExtension = getAction(
dataProvider?.id,
ActionTypes.AddDataProviderQueryExtension
)
$: removeExtension = getAction(
dataProvider?.id,
ActionTypes.RemoveDataProviderQueryExtension
)
const options = [
"Last 1 day",
"Last 7 days",
@ -25,44 +32,30 @@
]
let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
const updateDateRange = option => {
const query = dataProvider?.state?.query
if (!query || !setQuery) {
return
}
$: queryExtension = getQueryExtension(value)
$: addExtension?.($component.id, "range", field, queryExtension)
value = option
const getQueryExtension = value => {
let low = dayjs.utc().subtract(1, "year")
let high = dayjs.utc().add(1, "day")
if (option === "Last 1 day") {
if (value === "Last 1 day") {
low = dayjs.utc().subtract(1, "day")
} else if (option === "Last 7 days") {
} else if (value === "Last 7 days") {
low = dayjs.utc().subtract(7, "days")
} else if (option === "Last 30 days") {
} else if (value === "Last 30 days") {
low = dayjs.utc().subtract(30, "days")
} else if (option === "Last 3 months") {
} else if (value === "Last 3 months") {
low = dayjs.utc().subtract(3, "months")
} else if (option === "Last 6 months") {
} else if (value === "Last 6 months") {
low = dayjs.utc().subtract(6, "months")
}
// Update data provider query with the new filter
setQuery({
...query,
range: {
...query.range,
[field]: {
high: high.format(),
low: low.format(),
},
},
})
return { low: low.format(), high: high.format() }
}
// Update the range on mount to the initial value
onMount(() => {
updateDateRange(value)
onDestroy(() => {
removeExtension?.($component.id)
})
</script>
@ -71,6 +64,6 @@
placeholder={null}
{options}
{value}
on:change={e => updateDateRange(e.detail)}
on:change={e => (value = e.detail)}
/>
</div>

25
packages/client/src/components/app/Heading.svelte
View File

@ -13,10 +13,11 @@
export let underline
export let size
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text"
: text || ""
let node
$: $component.editing && node?.focus()
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Heading--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
@ -24,6 +25,13 @@
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || ""
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
@ -36,15 +44,24 @@
},
}
}
// Convert contenteditable HTML to text and save
const updateText = e => {
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
builderStore.actions.updateProp("text", sanitized)
}
</script>
<h1
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="spectrum-Heading {sizeClass} {alignClass}"
on:blur={$component.editing ? updateText : null}
>
{componentText}
</h1>

45
packages/client/src/components/app/Link.svelte
View File

@ -14,19 +14,25 @@
export let underline
export let size
$: external = url && typeof url === "string" && !url.startsWith("/")
let node
$: $component.editing && node?.focus()
$: externalLink = url && typeof url === "string" && !url.startsWith("/")
$: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || "Placeholder link"
: text || ""
$: componentText = getComponentText(text, $builderStore, $component)
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || ""
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
@ -39,10 +45,27 @@
},
}
}
const updateText = e => {
builderStore.actions.updateProp("text", e.target.textContent)
}
</script>
{#if $builderStore.inBuilder || componentText}
{#if external}
{#if $component.editing}
<div
bind:this={node}
contenteditable
use:styleable={styles}
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
on:blur={$component.editing ? updateText : null}
>
{componentText}
</div>
{:else if $builderStore.inBuilder || componentText}
{#if externalLink}
<a
{target}
href={url || "/"}
@ -72,12 +95,12 @@
{/if}
<style>
a {
a,
div {
color: var(--spectrum-alias-text-color);
white-space: nowrap;
transition: color 130ms ease-in-out;
}
a:hover {
a:not(.placeholder):hover {
color: var(--spectrum-link-primary-m-text-color-hover) !important;
}
.placeholder {

25
packages/client/src/components/app/Text.svelte
View File

@ -12,10 +12,11 @@
export let underline
export let size
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text"
: text || ""
let node
$: $component.editing && node?.focus()
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Body--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
@ -23,6 +24,13 @@
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || ""
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
@ -35,15 +43,24 @@
},
}
}
// Convert contenteditable HTML to text and save
const updateText = e => {
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
builderStore.actions.updateProp("text", sanitized)
}
</script>
<p
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
class:placeholder
class:bold
class:italic
class:underline
class="spectrum-Body {sizeClass} {alignClass}"
on:blur={$component.editing ? updateText : null}
>
{componentText}
</p>

9
packages/client/src/components/app/blocks/CardsBlock.svelte
View File

@ -1,5 +1,5 @@
<script>
import { onMount, getContext } from "svelte"
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import { Heading } from "@budibase/bbui"
@ -46,6 +46,7 @@
let repeaterId
let schema
$: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: cardWidth = cardHorizontal ? 420 : 300
@ -107,12 +108,12 @@
return `${split[0]}/{{ ${safe(repeaterId)}.${safe(col)} }}`
}
// Load the datasource schema on mount so we can determine column types
onMount(async () => {
// Load the datasource schema so we can determine column types
const fetchSchema = async dataSource => {
if (dataSource) {
schema = await API.fetchDatasourceSchema(dataSource)
}
})
}
</script>
<Block>

9
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -1,5 +1,5 @@
<script>
import { onMount, getContext } from "svelte"
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import { Heading } from "@budibase/bbui"
@ -41,6 +41,7 @@
let dataProviderId
let schema
$: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: titleButtonAction = [
@ -85,12 +86,12 @@
return enrichedColumns.slice(0, 3)
}
// Load the datasource schema on mount so we can determine column types
onMount(async () => {
// Load the datasource schema so we can determine column types
const fetchSchema = async dataSource => {
if (dataSource) {
schema = await API.fetchDatasourceSchema(dataSource)
}
})
}
</script>
<Block>

31
packages/client/src/components/app/forms/Field.svelte
View File

@ -17,54 +17,53 @@
const formContext = getContext("form")
const formStepContext = getContext("form-step")
const fieldGroupContext = getContext("field-group")
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
// Register field with form
const formApi = formContext?.formApi
const labelPos = fieldGroupContext?.labelPosition || "above"
const formField = formApi?.registerField(
$: formStep = formStepContext ? $formStepContext || 1 : 1
$: formField = formApi?.registerField(
field,
type,
defaultValue,
disabled,
validation,
formStepContext || 1
formStep
)
// Focus label when editing
let labelNode
$: $component.editing && labelNode?.focus()
// Update form properties in parent component on every store change
const unsubscribe = formField?.subscribe(value => {
$: unsubscribe = formField?.subscribe(value => {
fieldState = value?.fieldState
fieldApi = value?.fieldApi
fieldSchema = value?.fieldSchema
})
onDestroy(() => unsubscribe?.())
// Keep field state up to date with props which might change due to
// conditional UI
$: updateValidation(validation)
$: updateDisabled(disabled)
// Determine label class from position
$: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
const updateValidation = validation => {
fieldApi?.updateValidation(validation)
}
const updateDisabled = disabled => {
fieldApi?.setDisabled(disabled)
const updateLabel = e => {
builderStore.actions.updateProp("label", e.target.textContent)
}
</script>
<FieldGroupFallback>
<div class="spectrum-Form-item" use:styleable={$component.styles}>
<label
bind:this={labelNode}
contenteditable={$component.editing}
on:blur={$component.editing ? updateLabel : null}
class:hidden={!label}
for={fieldState?.fieldId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
>
{label || ""}
{label || " "}
</label>
<div class="spectrum-Form-itemField">
{#if !formContext}

16
packages/client/src/components/app/forms/Form.svelte
View File

@ -1,6 +1,7 @@
<script>
import { getContext, onMount } from "svelte"
import { getContext } from "svelte"
import InnerForm from "./InnerForm.svelte"
import { hashString } from "utils/helpers"
export let dataSource
export let theme
@ -15,6 +16,8 @@
let schema
let table
$: fetchSchema(dataSource)
// Returns the closes data context which isn't a built in context
const getInitialValues = (type, dataSource, context) => {
// Only inherit values for update forms
@ -35,7 +38,7 @@
}
// Fetches the form schema from this form's dataSource
const fetchSchema = async () => {
const fetchSchema = async dataSource => {
if (!dataSource) {
schema = {}
}
@ -62,14 +65,15 @@
schema = dataSourceSchema || {}
}
if (!loaded) {
loaded = true
}
}
$: initialValues = getInitialValues(actionType, dataSource, $context)
$: resetKey = JSON.stringify(initialValues)
// Load the form schema on mount
onMount(fetchSchema)
$: resetKey = hashString(
JSON.stringify(initialValues) + JSON.stringify(schema)
)
</script>
{#if loaded}

5
packages/client/src/components/app/forms/FormStep.svelte
View File

@ -1,5 +1,6 @@
<script>
import { getContext, setContext } from "svelte"
import { writable } from "svelte/store"
import Placeholder from "../Placeholder.svelte"
export let step = 1
@ -9,7 +10,9 @@
const formContext = getContext("form")
// Set form step context so fields know what step they are within
setContext("form-step", step || 1)
const stepStore = writable(step || 1)
$: stepStore.set(step || 1)
setContext("form-step", stepStore)
$: formState = formContext?.formState
$: currentStep = $formState?.currentStep

24
packages/client/src/components/app/forms/InnerForm.svelte
View File

@ -96,15 +96,14 @@
return
}
// If we've already registered this field then wipe any errors and
// return the existing field
// If we've already registered this field then keep some existing state
let initialValue = initialValues[field] ?? defaultValue
let fieldId = `id-${generateID()}`
const existingField = getField(field)
if (existingField) {
existingField.update(state => {
state.fieldState.error = null
return state
})
return existingField
const { fieldState } = get(existingField)
initialValue = fieldState.value ?? initialValue
fieldId = fieldState.fieldId
}
// Auto columns are always disabled
@ -125,8 +124,8 @@
type,
step: step || 1,
fieldState: {
fieldId: `id-${generateID()}`,
value: initialValues[field] ?? defaultValue,
fieldId,
value: initialValue,
error: null,
disabled: disabled || fieldDisabled || isAutoColumn,
defaultValue,
@ -137,7 +136,12 @@
})
// Add this field
if (existingField) {
const otherFields = fields.filter(info => get(info).name !== field)
fields = [...otherFields, fieldInfo]
} else {
fields = [...fields, fieldInfo]
}
return fieldInfo
},
@ -287,7 +291,7 @@
// Provide form step context so that forms without any step components
// register their fields to step 1
setContext("form-step", 1)
setContext("form-step", writable(1))
// Action context to pass to children
const actions = [

9
packages/client/src/components/app/table/Table.svelte
View File

@ -17,10 +17,6 @@
const component = getContext("component")
const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk")
const setSorting = getAction(
dataProvider?.id,
ActionTypes.SetDataProviderSorting
)
const customColumnKey = `custom-${Math.random()}`
const customRenderers = [
{
@ -29,13 +25,16 @@
},
]
// Table state
$: hasChildren = $component.children
$: loading = dataProvider?.loading ?? false
$: data = dataProvider?.rows || []
$: fullSchema = dataProvider?.schema ?? {}
$: fields = getFields(fullSchema, columns, showAutoColumns)
$: schema = getFilteredSchema(fullSchema, fields, hasChildren)
$: setSorting = getAction(
dataProvider?.id,
ActionTypes.SetDataProviderSorting
)
const getFields = (schema, customColumns, showAutoColumns) => {
// Check for an invalid column selection

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

@ -17,10 +17,9 @@
<div
in:fade={{
delay: transition ? 50 : 0,
delay: transition ? 130 : 0,
duration: transition ? 130 : 0,
}}
out:fade={{ duration: transition ? 130 : 0 }}
class="indicator"
class:flipped
class:line

35
packages/client/src/components/preview/KeyboardManager.svelte Normal file
View File

@ -0,0 +1,35 @@
<script>
import { onMount, onDestroy } from "svelte"
import { get } from "svelte/store"
import { builderStore } from "stores"
onMount(() => {
if (get(builderStore).inBuilder) {
document.addEventListener("keydown", onKeyDown)
}
})
onDestroy(() => {
if (get(builderStore).inBuilder) {
document.removeEventListener("keydown", onKeyDown)
}
})
const onKeyDown = e => {
if (e.key === "Delete" || e.key === "Backspace") {
deleteSelectedComponent()
}
}
const deleteSelectedComponent = () => {
const state = get(builderStore)
if (!state.inBuilder || !state.selectedComponentId || state.editMode) {
return
}
const activeTag = document.activeElement?.tagName.toLowerCase()
if (["input", "textarea"].indexOf(activeTag) !== -1) {
return
}
builderStore.actions.deleteComponent(state.selectedComponentId)
}
</script>

6
packages/client/src/components/preview/SelectionIndicator.svelte
View File

@ -1,11 +1,15 @@
<script>
import { builderStore } from "stores"
import IndicatorSet from "./IndicatorSet.svelte"
$: color = $builderStore.editMode
? "var(--spectrum-global-color-static-green-500)"
: "var(--spectrum-global-color-static-blue-600)"
</script>
<IndicatorSet
componentId={$builderStore.selectedComponentId}
color="var(--spectrum-global-color-static-blue-600)"
{color}
zIndex="910"
transition
/>

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

@ -122,7 +122,7 @@
prop={setting.key}
value={option.value}
icon={option.barIcon}
title={option.barTitle}
title={option.barTitle || option.label}
/>
{/each}
{:else}
@ -136,7 +136,7 @@
<SettingsButton
prop={setting.key}
icon={setting.barIcon}
title={setting.barTitle}
title={setting.barTitle || setting.label}
bool
/>
{:else if setting.type === "color"}

3
packages/client/src/constants.js
View File

@ -25,7 +25,8 @@ export const UnsortableTypes = [
export const ActionTypes = {
ValidateForm: "ValidateForm",
RefreshDatasource: "RefreshDatasource",
SetDataProviderQuery: "SetDataProviderQuery",
AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
SetDataProviderSorting: "SetDataProviderSorting",
ClearForm: "ClearForm",
ChangeFormStep: "ChangeFormStep",

26
packages/client/src/stores/builder.js
View File

@ -1,4 +1,4 @@
import { writable, derived } from "svelte/store"
import { writable, derived, get } from "svelte/store"
import Manifest from "manifest.json"
import { findComponentById, findComponentPathById } from "../utils/components"
import { pingEndUser } from "../api"
@ -14,6 +14,7 @@ const createBuilderStore = () => {
layout: null,
screen: null,
selectedComponentId: null,
editMode: false,
previewId: null,
previewType: null,
selectedPath: [],
@ -50,6 +51,10 @@ const createBuilderStore = () => {
const actions = {
selectComponent: id => {
if (id === get(writableStore).selectedComponentId) {
return
}
writableStore.update(state => ({ ...state, editMode: false }))
dispatchEvent("select-component", { id })
},
updateProp: (prop, value) => {
@ -65,10 +70,7 @@ const createBuilderStore = () => {
pingEndUser()
},
setSelectedPath: path => {
writableStore.update(state => {
state.selectedPath = path
return state
})
writableStore.update(state => ({ ...state, selectedPath: path }))
},
moveComponent: (componentId, destinationComponentId, mode) => {
dispatchEvent("move-component", {
@ -78,10 +80,16 @@ const createBuilderStore = () => {
})
},
setDragging: dragging => {
writableStore.update(state => {
state.isDragging = dragging
return state
})
if (dragging === get(writableStore).isDragging) {
return
}
writableStore.update(state => ({ ...state, isDragging: dragging }))
},
setEditMode: enabled => {
if (enabled === get(writableStore).editMode) {
return
}
writableStore.update(state => ({ ...state, editMode: enabled }))
},
}
return {

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

@ -21,12 +21,7 @@ export const styleable = (node, styles = {}) => {
let applyNormalStyles
let applyHoverStyles
let selectComponent
// Allow dragging if required
const parent = node.closest(".component")
if (parent && parent.classList.contains("draggable")) {
node.setAttribute("draggable", true)
}
let editComponent
// Creates event listeners and applies initial styles
const setupStyles = (newStyles = {}) => {
@ -45,6 +40,9 @@ export const styleable = (node, styles = {}) => {
...(newStyles.hover || {}),
}
// Allow dragging if required
node.setAttribute("draggable", !!newStyles.draggable)
// Applies a style string to a DOM node
const applyStyles = styleString => {
node.style = styleString
@ -69,6 +67,17 @@ export const styleable = (node, styles = {}) => {
return false
}
// Handler to start editing a component (if applicable) when double
// clicking in the builder preview
editComponent = event => {
if (newStyles.interactive && newStyles.editable) {
builderStore.actions.setEditMode(true)
}
event.preventDefault()
event.stopPropagation()
return false
}
// Add listeners to toggle hover styles
node.addEventListener("mouseover", applyHoverStyles)
node.addEventListener("mouseout", applyNormalStyles)
@ -76,6 +85,7 @@ export const styleable = (node, styles = {}) => {
// Add builder preview click listener
if (newStyles.interactive) {
node.addEventListener("click", selectComponent, false)
node.addEventListener("dblclick", editComponent, false)
}
// Apply initial normal styles
@ -87,6 +97,7 @@ export const styleable = (node, styles = {}) => {
node.removeEventListener("mouseover", applyHoverStyles)
node.removeEventListener("mouseout", applyNormalStyles)
node.removeEventListener("click", selectComponent)
node.removeEventListener("dblclick", editComponent)
}
// Apply initial styles