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 d6018c2c9c e43d5ba158
commit 5cf9aad280
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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) { if (!name || !component) {
return return
} }
if (component[name] === value) {
return
}
component[name] = value component[name] = value
store.update(state => { store.update(state => {
state.selectedComponentId = component._id 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 // Messages that can be sent from the iframe preview to the builder
// Budibase events are and initalisation events // Budibase events are and initalisation events
const MessageTypes = { const MessageTypes = {
IFRAME_LOADED: "iframe-loaded",
READY: "ready", READY: "ready",
ERROR: "error", ERROR: "error",
BUDIBASE: "type", BUDIBASE: "type",
KEYDOWN: "keydown"
} }
// Construct iframe template // Construct iframe template
@ -69,7 +67,7 @@
theme: $store.theme, theme: $store.theme,
customTheme: $store.customTheme, customTheme: $store.customTheme,
previewDevice: $store.previewDevice, previewDevice: $store.previewDevice,
messagePassing: $store.clientFeatures.messagePassing messagePassing: $store.clientFeatures.messagePassing,
} }
// Saving pages and screens to the DB causes them to have _revs. // Saving pages and screens to the DB causes them to have _revs.
@ -111,7 +109,6 @@
loading = false loading = false
error = event.error || "An unknown error occurred" error = event.error || "An unknown error occurred"
}, },
[MessageTypes.KEYDOWN]: handleKeydownEvent
} }
const messageHandler = handlers[message.data.type] || handleBudibaseEvent const messageHandler = handlers[message.data.type] || handleBudibaseEvent
@ -122,15 +119,24 @@
window.addEventListener("message", receiveMessage) window.addEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) { if (!$store.clientFeatures.messagePassing) {
// Legacy - remove in later versions of BB // Legacy - remove in later versions of BB
iframe.contentWindow.addEventListener("ready", () => { iframe.contentWindow.addEventListener(
receiveMessage({ data: { type: MessageTypes.READY }}) "ready",
}, { once: true }) () => {
iframe.contentWindow.addEventListener("error", event => { receiveMessage({ data: { type: MessageTypes.READY } })
receiveMessage({ data: { type: MessageTypes.ERROR, error: event.detail }}) },
}, { once: true }) { 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 // Add listener for events sent by client library in preview
iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent) iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
} }
}) })
@ -140,14 +146,20 @@
window.removeEventListener("message", receiveMessage) window.removeEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) { if (!$store.clientFeatures.messagePassing) {
// Legacy - remove in later versions of BB // Legacy - remove in later versions of BB
iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent) iframe.contentWindow.removeEventListener(
iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent) "bb-event",
handleBudibaseEvent
)
} }
} }
}) })
const handleBudibaseEvent = event => { const handleBudibaseEvent = event => {
const { type, data } = event.data || event.detail const { type, data } = event.data || event.detail
if (!type) {
return
}
if (type === "select-component" && data.id) { if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id }) store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") { } 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 => { const confirmDeleteComponent = componentId => {
idToDelete = componentId idToDelete = componentId
confirmDeleteDialog.show() confirmDeleteDialog.show()

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

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

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

@ -13,6 +13,12 @@
$: noChildrenAllowed = !component || !definition?.hasChildren $: noChildrenAllowed = !component || !definition?.hasChildren
$: noPaste = !$store.componentToPaste $: 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 moveUpComponent = () => {
const asset = get(currentAsset) const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id) const parent = findComponentParent(asset.props, component._id)
@ -69,7 +75,7 @@
} }
</script> </script>
{#if definition?.editable !== false} {#if showMenu}
<ActionMenu> <ActionMenu>
<div slot="control" class="icon"> <div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" /> <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 let modal
$: setupComplete = $: 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 $datasources.list.length > 1
onMount(() => { onMount(() => {

28
packages/client/manifest.json
View File

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
import { getContext } from "svelte" import { getContext } from "svelte"
import "@spectrum-css/button/dist/index-vars.css" import "@spectrum-css/button/dist/index-vars.css"
const { styleable } = getContext("sdk") const { styleable, builderStore } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
export let disabled = false export let disabled = false
@ -11,16 +11,35 @@
export let size = "M" export let size = "M"
export let type = "primary" export let type = "primary"
export let quiet = false 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> </script>
<button <button
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`} class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
class:spectrum-Button--quiet={quiet} class:spectrum-Button--quiet={quiet}
disabled={disabled || false} {disabled}
use:styleable={$component.styles} use:styleable={$component.styles}
on:click={onClick} on:click={onClick}
contenteditable={$component.editing}
on:blur={$component.editing ? updateText : null}
bind:this={node}
> >
{text || ""} {componentText}
</button> </button>
<style> <style>

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

@ -34,12 +34,18 @@
let bookmarks = [null] let bookmarks = [null]
let pageNumber = 0 let pageNumber = 0
let query = null let query = null
let queryExtensions = {}
// Sorting can be overridden at run time, so we can't use the prop directly // Sorting can be overridden at run time, so we can't use the prop directly
let currentSortColumn = sortColumn let currentSortColumn = sortColumn
let currentSortOrder = sortOrder 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" $: internalTable = dataSource?.type === "table"
$: nestedProvider = dataSource?.type === "provider" $: nestedProvider = dataSource?.type === "provider"
$: hasNextPage = bookmarks[pageNumber + 1] != null $: hasNextPage = bookmarks[pageNumber + 1] != null
@ -91,8 +97,12 @@
metadata: { dataSource }, metadata: { dataSource },
}, },
{ {
type: ActionTypes.SetDataProviderQuery, type: ActionTypes.AddDataProviderQueryExtension,
callback: newQuery => (query = newQuery), callback: addQueryExtension,
},
{
type: ActionTypes.RemoveDataProviderQueryExtension,
callback: removeQueryExtension,
}, },
{ {
type: ActionTypes.SetDataProviderSorting, type: ActionTypes.SetDataProviderSorting,
@ -264,6 +274,38 @@
pageNumber-- pageNumber--
allRows = res.rows 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> </script>
<div use:styleable={$component.styles} class="container"> <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 { getContext } from "svelte"
import dayjs from "dayjs" import dayjs from "dayjs"
import utc from "dayjs/plugin/utc" import utc from "dayjs/plugin/utc"
import { onMount } from "svelte" import { onDestroy } from "svelte"
dayjs.extend(utc) dayjs.extend(utc)
@ -14,7 +14,14 @@
const component = getContext("component") const component = getContext("component")
const { styleable, ActionTypes, getAction } = getContext("sdk") 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 = [ const options = [
"Last 1 day", "Last 1 day",
"Last 7 days", "Last 7 days",
@ -25,44 +32,30 @@
] ]
let value = options.includes(defaultValue) ? defaultValue : "Last 30 days" let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
const updateDateRange = option => { $: queryExtension = getQueryExtension(value)
const query = dataProvider?.state?.query $: addExtension?.($component.id, "range", field, queryExtension)
if (!query || !setQuery) {
return
}
value = option const getQueryExtension = value => {
let low = dayjs.utc().subtract(1, "year") let low = dayjs.utc().subtract(1, "year")
let high = dayjs.utc().add(1, "day") let high = dayjs.utc().add(1, "day")
if (option === "Last 1 day") { if (value === "Last 1 day") {
low = dayjs.utc().subtract(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") low = dayjs.utc().subtract(7, "days")
} else if (option === "Last 30 days") { } else if (value === "Last 30 days") {
low = dayjs.utc().subtract(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") low = dayjs.utc().subtract(3, "months")
} else if (option === "Last 6 months") { } else if (value === "Last 6 months") {
low = dayjs.utc().subtract(6, "months") low = dayjs.utc().subtract(6, "months")
} }
// Update data provider query with the new filter return { low: low.format(), high: high.format() }
setQuery({
...query,
range: {
...query.range,
[field]: {
high: high.format(),
low: low.format(),
},
},
})
} }
// Update the range on mount to the initial value onDestroy(() => {
onMount(() => { removeExtension?.($component.id)
updateDateRange(value)
}) })
</script> </script>
@ -71,6 +64,6 @@
placeholder={null} placeholder={null}
{options} {options}
{value} {value}
on:change={e => updateDateRange(e.detail)} on:change={e => (value = e.detail)}
/> />
</div> </div>

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

@ -13,10 +13,11 @@
export let underline export let underline
export let size export let size
$: placeholder = $builderStore.inBuilder && !text let node
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text" $: $component.editing && node?.focus()
: text || "" $: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Heading--size${size || "M"}` $: sizeClass = `spectrum-Heading--size${size || "M"}`
$: alignClass = `align--${align || "left"}` $: alignClass = `align--${align || "left"}`
@ -24,6 +25,13 @@
// overrides the color when it's passed as inline style. // overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color) $: 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) => { const enrichStyles = (styles, color) => {
if (!color) { if (!color) {
return styles 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> </script>
<h1 <h1
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles} use:styleable={styles}
class:placeholder class:placeholder
class:bold class:bold
class:italic class:italic
class:underline class:underline
class="spectrum-Heading {sizeClass} {alignClass}" class="spectrum-Heading {sizeClass} {alignClass}"
on:blur={$component.editing ? updateText : null}
> >
{componentText} {componentText}
</h1> </h1>

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

@ -14,19 +14,25 @@
export let underline export let underline
export let size 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" $: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text $: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder $: componentText = getComponentText(text, $builderStore, $component)
? 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.
// Add color styles to main styles object, otherwise the styleable helper // Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style. // overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color) $: 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) => { const enrichStyles = (styles, color) => {
if (!color) { if (!color) {
return styles return styles
@ -39,10 +45,27 @@
}, },
} }
} }
const updateText = e => {
builderStore.actions.updateProp("text", e.target.textContent)
}
</script> </script>
{#if $builderStore.inBuilder || componentText} {#if $component.editing}
{#if external} <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 <a
{target} {target}
href={url || "/"} href={url || "/"}
@ -72,12 +95,12 @@
{/if} {/if}
<style> <style>
a { a,
div {
color: var(--spectrum-alias-text-color); color: var(--spectrum-alias-text-color);
white-space: nowrap;
transition: color 130ms ease-in-out; transition: color 130ms ease-in-out;
} }
a:hover { a:not(.placeholder):hover {
color: var(--spectrum-link-primary-m-text-color-hover) !important; color: var(--spectrum-link-primary-m-text-color-hover) !important;
} }
.placeholder { .placeholder {

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

@ -12,10 +12,11 @@
export let underline export let underline
export let size export let size
$: placeholder = $builderStore.inBuilder && !text let node
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text" $: $component.editing && node?.focus()
: text || "" $: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Body--size${size || "M"}` $: sizeClass = `spectrum-Body--size${size || "M"}`
$: alignClass = `align--${align || "left"}` $: alignClass = `align--${align || "left"}`
@ -23,6 +24,13 @@
// overrides the color when it's passed as inline style. // overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color) $: 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) => { const enrichStyles = (styles, color) => {
if (!color) { if (!color) {
return styles 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> </script>
<p <p
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles} use:styleable={styles}
class:placeholder class:placeholder
class:bold class:bold
class:italic class:italic
class:underline class:underline
class="spectrum-Body {sizeClass} {alignClass}" class="spectrum-Body {sizeClass} {alignClass}"
on:blur={$component.editing ? updateText : null}
> >
{componentText} {componentText}
</p> </p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,10 +17,9 @@
<div <div
in:fade={{ in:fade={{
delay: transition ? 50 : 0, delay: transition ? 130 : 0,
duration: transition ? 130 : 0, duration: transition ? 130 : 0,
}} }}
out:fade={{ duration: transition ? 130 : 0 }}
class="indicator" class="indicator"
class:flipped class:flipped
class:line 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> <script>
import { builderStore } from "stores" import { builderStore } from "stores"
import IndicatorSet from "./IndicatorSet.svelte" import IndicatorSet from "./IndicatorSet.svelte"
$: color = $builderStore.editMode
? "var(--spectrum-global-color-static-green-500)"
: "var(--spectrum-global-color-static-blue-600)"
</script> </script>
<IndicatorSet <IndicatorSet
componentId={$builderStore.selectedComponentId} componentId={$builderStore.selectedComponentId}
color="var(--spectrum-global-color-static-blue-600)" {color}
zIndex="910" zIndex="910"
transition transition
/> />

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

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

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

@ -25,7 +25,8 @@ export const UnsortableTypes = [
export const ActionTypes = { export const ActionTypes = {
ValidateForm: "ValidateForm", ValidateForm: "ValidateForm",
RefreshDatasource: "RefreshDatasource", RefreshDatasource: "RefreshDatasource",
SetDataProviderQuery: "SetDataProviderQuery", AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
SetDataProviderSorting: "SetDataProviderSorting", SetDataProviderSorting: "SetDataProviderSorting",
ClearForm: "ClearForm", ClearForm: "ClearForm",
ChangeFormStep: "ChangeFormStep", 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 Manifest from "manifest.json"
import { findComponentById, findComponentPathById } from "../utils/components" import { findComponentById, findComponentPathById } from "../utils/components"
import { pingEndUser } from "../api" import { pingEndUser } from "../api"
@ -14,6 +14,7 @@ const createBuilderStore = () => {
layout: null, layout: null,
screen: null, screen: null,
selectedComponentId: null, selectedComponentId: null,
editMode: false,
previewId: null, previewId: null,
previewType: null, previewType: null,
selectedPath: [], selectedPath: [],
@ -50,6 +51,10 @@ const createBuilderStore = () => {
const actions = { const actions = {
selectComponent: id => { selectComponent: id => {
if (id === get(writableStore).selectedComponentId) {
return
}
writableStore.update(state => ({ ...state, editMode: false }))
dispatchEvent("select-component", { id }) dispatchEvent("select-component", { id })
}, },
updateProp: (prop, value) => { updateProp: (prop, value) => {
@ -65,10 +70,7 @@ const createBuilderStore = () => {
pingEndUser() pingEndUser()
}, },
setSelectedPath: path => { setSelectedPath: path => {
writableStore.update(state => { writableStore.update(state => ({ ...state, selectedPath: path }))
state.selectedPath = path
return state
})
}, },
moveComponent: (componentId, destinationComponentId, mode) => { moveComponent: (componentId, destinationComponentId, mode) => {
dispatchEvent("move-component", { dispatchEvent("move-component", {
@ -78,10 +80,16 @@ const createBuilderStore = () => {
}) })
}, },
setDragging: dragging => { setDragging: dragging => {
writableStore.update(state => { if (dragging === get(writableStore).isDragging) {
state.isDragging = dragging return
return state }
}) writableStore.update(state => ({ ...state, isDragging: dragging }))
},
setEditMode: enabled => {
if (enabled === get(writableStore).editMode) {
return
}
writableStore.update(state => ({ ...state, editMode: enabled }))
}, },
} }
return { return {

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

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