Merge pull request #3403 from Budibase/cheeks-lab-day
Inline text editing + perf. enhancements + preview enhancements
This commit is contained in:
Andrew Kingston
GitHub
commit
5cf9aad280
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -32,15 +32,13 @@
|
|||
.component("@budibase/standard-components/screenslot")
|
||||
.instanceName("Content Placeholder")
|
||||
.json()
|
||||
|
||||
|
||||
// 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,16 +119,25 @@
|
|||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Remove all iframe event listeners on component destroy
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
// Enrich component settings
|
||||
enrichComponentSettings(componentSettings, context, instanceChanged)
|
||||
|
||||
// Update instance key
|
||||
if (instanceChanged) {
|
||||
lastInstanceKey = key
|
||||
}
|
||||
}
|
||||
|
||||
const getNestedSettings = (rawSettings, settingsDefinition) => {
|
||||
let clone = { ...rawSettings }
|
||||
// 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) {
|
||||
return
|
||||
// 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,36 +252,51 @@
|
|||
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)}
|
||||
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
|
||||
<!-- and the performance matters for the selection indicators -->
|
||||
<div
|
||||
class={`component ${id}`}
|
||||
class:draggable
|
||||
class:droppable
|
||||
class:empty
|
||||
class:interactive
|
||||
class:block={isBlock}
|
||||
data-id={id}
|
||||
data-name={name}
|
||||
>
|
||||
<svelte:component this={constructor} {...settings}>
|
||||
{#if children.length}
|
||||
{#each children as child (child._id)}
|
||||
<svelte:self instance={child} />
|
||||
{/each}
|
||||
{:else if emptyState}
|
||||
<Placeholder />
|
||||
{:else if isBlock}
|
||||
<slot />
|
||||
{/if}
|
||||
</svelte:component>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
{#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
|
||||
class={`component ${id}`}
|
||||
class:draggable
|
||||
class:droppable
|
||||
class:empty
|
||||
class:interactive
|
||||
class:editing
|
||||
class:block={isBlock}
|
||||
data-id={id}
|
||||
data-name={name}
|
||||
>
|
||||
<svelte:component this={constructor} {...cachedSettings}>
|
||||
{#if children.length}
|
||||
{#each children as child (child._id)}
|
||||
<svelte:self instance={child} />
|
||||
{/each}
|
||||
{:else if emptyState}
|
||||
<Placeholder />
|
||||
{:else if isBlock}
|
||||
<slot />
|
||||
{/if}
|
||||
</svelte:component>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.component {
|
||||
|
|
@ -291,4 +308,7 @@
|
|||
.draggable :global(*:hover) {
|
||||
cursor: grab;
|
||||
}
|
||||
.editing :global(*:hover) {
|
||||
cursor: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 || {}
|
||||
}
|
||||
|
||||
loaded = true
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
fields = [...fields, fieldInfo]
|
||||
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 = [
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue