diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 5b9bebcbf5..c4e14d2e5c 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -393,18 +393,45 @@ const getUrlBindings = asset => { /** * Gets all bindable properties exposed in a button actions flow up until - * the specified action ID. + * the specified action ID, as well as context provided for the action + * setting as a whole by the component. */ -export const getButtonContextBindings = (actions, actionId) => { +export const getButtonContextBindings = ( + asset, + componentId, + settingKey, + actions, + actionId +) => { + let bindings = [] + + // Check if any context bindings are provided by the component for this + // setting + const component = findComponent(asset.props, componentId) + const settings = getComponentSettings(component?._component) + const eventSetting = settings.find(setting => setting.key === settingKey) + if (!eventSetting) { + return bindings + } + if (eventSetting.context?.length) { + eventSetting.context.forEach(contextEntry => { + bindings.push({ + readableBinding: contextEntry.label, + runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe( + contextEntry.key + )}`, + }) + }) + } + // Get the steps leading up to this value const index = actions?.findIndex(action => action.id === actionId) if (index == null || index === -1) { - return [] + return bindings } const prevActions = actions.slice(0, index) // Generate bindings for any steps which provide context - let bindings = [] prevActions.forEach((action, idx) => { const def = ActionDefinitions.actions.find( x => x.name === action["##eventHandlerType"] @@ -418,6 +445,7 @@ export const getButtonContextBindings = (actions, actionId) => { }) } }) + return bindings } diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js index d4d7460ed2..bd3a149d63 100644 --- a/packages/builder/src/builderStore/store/theme.js +++ b/packages/builder/src/builderStore/store/theme.js @@ -2,9 +2,10 @@ import { createLocalStorageStore } from "@budibase/frontend-core" export const getThemeStore = () => { const themeElement = document.documentElement + const initialValue = { theme: "darkest", - options: ["lightest", "light", "dark", "darkest"], + options: ["lightest", "light", "dark", "darkest", "nord"], } const store = createLocalStorageStore("bb-theme", initialValue) @@ -21,6 +22,7 @@ export const getThemeStore = () => { `spectrum--${option}`, option === state.theme ) + themeElement.classList.add("spectrum--darkest") }) }) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte index 8cf0f37f70..5b0ab4a6a3 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -12,11 +12,13 @@ import { getAvailableActions } from "./index" import { generate } from "shortid" import { getButtonContextBindings } from "builderStore/dataBinding" + import { currentAsset, store } from "builderStore" const flipDurationMs = 150 const EVENT_TYPE_KEY = "##eventHandlerType" const actionTypes = getAvailableActions() + export let key export let actions export let bindings = [] @@ -24,6 +26,9 @@ // These are ephemeral bindings which only exist while executing actions $: buttonContextBindings = getButtonContextBindings( + $currentAsset, + $store.selectedComponentId, + key, actions, selectedAction?.id ) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte index 6a0e94cd4c..550d982013 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte @@ -8,6 +8,7 @@ const dispatch = createEventDispatcher() + export let key export let value = [] export let name export let bindings @@ -81,5 +82,6 @@ bind:actions={tmpValue} eventType={name} {bindings} + {key} /> diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 911688b30c..617b1c83ab 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -79,6 +79,7 @@ bindings={allBindings} name={key} text={label} + {key} {type} {...props} /> diff --git a/packages/client/manifest.json b/packages/client/manifest.json index fff56f595d..1c7100192a 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -264,7 +264,8 @@ { "label": "Primary", "value": "primary" - }, { + }, + { "label": "Secondary", "value": "secondary" }, @@ -507,7 +508,7 @@ }, { "type": "static", - "values": [ + "values": [ { "label": "Row Index", "key": "index" @@ -626,28 +627,36 @@ "defaultValue": "M", "showInBar": true, "barStyle": "picker", - "options": [{ - "label": "Extra Small", - "value": "XS" - }, { - "label": "Small", - "value": "S" - }, { - "label": "Medium", - "value": "M" - }, { - "label": "Large", - "value": "L" - }, { - "label": "Extra Large", - "value": "XL" - }, { - "label": "2XL", - "value": "XXL" - }, { - "label": "3XL", - "value": "XXXL" - }] + "options": [ + { + "label": "Extra Small", + "value": "XS" + }, + { + "label": "Small", + "value": "S" + }, + { + "label": "Medium", + "value": "M" + }, + { + "label": "Large", + "value": "L" + }, + { + "label": "Extra Large", + "value": "XL" + }, + { + "label": "2XL", + "value": "XXL" + }, + { + "label": "3XL", + "value": "XXXL" + } + ] }, { "type": "color", @@ -689,27 +698,32 @@ "defaultValue": "left", "showInBar": true, "barStyle": "buttons", - "options": [{ - "label": "Left", - "value": "left", - "barIcon": "TextAlignLeft", - "barTitle": "Align left" - }, { - "label": "Center", - "value": "center", - "barIcon": "TextAlignCenter", - "barTitle": "Align center" - }, { - "label": "Right", - "value": "right", - "barIcon": "TextAlignRight", - "barTitle": "Align right" - }, { - "label": "Justify", - "value": "justify", - "barIcon": "TextAlignJustify", - "barTitle": "Justify text" - }] + "options": [ + { + "label": "Left", + "value": "left", + "barIcon": "TextAlignLeft", + "barTitle": "Align left" + }, + { + "label": "Center", + "value": "center", + "barIcon": "TextAlignCenter", + "barTitle": "Align center" + }, + { + "label": "Right", + "value": "right", + "barIcon": "TextAlignRight", + "barTitle": "Align right" + }, + { + "label": "Justify", + "value": "justify", + "barIcon": "TextAlignJustify", + "barTitle": "Justify text" + } + ] } ] }, @@ -733,28 +747,36 @@ "defaultValue": "M", "showInBar": true, "barStyle": "picker", - "options": [{ - "label": "Extra Small", - "value": "XS" - }, { - "label": "Small", - "value": "S" - }, { - "label": "Medium", - "value": "M" - }, { - "label": "Large", - "value": "L" - }, { - "label": "Extra Large", - "value": "XL" - }, { - "label": "2XL", - "value": "XXL" - }, { - "label": "3XL", - "value": "XXXL" - }] + "options": [ + { + "label": "Extra Small", + "value": "XS" + }, + { + "label": "Small", + "value": "S" + }, + { + "label": "Medium", + "value": "M" + }, + { + "label": "Large", + "value": "L" + }, + { + "label": "Extra Large", + "value": "XL" + }, + { + "label": "2XL", + "value": "XXL" + }, + { + "label": "3XL", + "value": "XXXL" + } + ] }, { "type": "color", @@ -796,27 +818,32 @@ "defaultValue": "left", "showInBar": true, "barStyle": "buttons", - "options": [{ - "label": "Left", - "value": "left", - "barIcon": "TextAlignLeft", - "barTitle": "Align left" - }, { - "label": "Center", - "value": "center", - "barIcon": "TextAlignCenter", - "barTitle": "Align center" - }, { - "label": "Right", - "value": "right", - "barIcon": "TextAlignRight", - "barTitle": "Align right" - }, { - "label": "Justify", - "value": "justify", - "barIcon": "TextAlignJustify", - "barTitle": "Justify text" - }] + "options": [ + { + "label": "Left", + "value": "left", + "barIcon": "TextAlignLeft", + "barTitle": "Align left" + }, + { + "label": "Center", + "value": "center", + "barIcon": "TextAlignCenter", + "barTitle": "Align center" + }, + { + "label": "Right", + "value": "right", + "barIcon": "TextAlignRight", + "barTitle": "Align right" + }, + { + "label": "Justify", + "value": "justify", + "barIcon": "TextAlignJustify", + "barTitle": "Justify text" + } + ] } ] }, @@ -837,16 +864,20 @@ "defaultValue": "M", "showInBar": true, "barStyle": "picker", - "options": [{ - "label": "Small", - "value": "S" - }, { - "label": "Medium", - "value": "M" - }, { - "label": "Large", - "value": "L" - }] + "options": [ + { + "label": "Small", + "value": "S" + }, + { + "label": "Medium", + "value": "M" + }, + { + "label": "Large", + "value": "L" + } + ] }, { "type": "color", @@ -1037,16 +1068,20 @@ "defaultValue": "M", "showInBar": true, "barStyle": "picker", - "options": [{ - "label": "Small", - "value": "S" - }, { - "label": "Medium", - "value": "M" - }, { - "label": "Large", - "value": "L" - }] + "options": [ + { + "label": "Small", + "value": "S" + }, + { + "label": "Medium", + "value": "M" + }, + { + "label": "Large", + "value": "L" + } + ] }, { "type": "color", @@ -1088,27 +1123,32 @@ "defaultValue": "left", "showInBar": true, "barStyle": "buttons", - "options": [{ - "label": "Left", - "value": "left", - "barIcon": "TextAlignLeft", - "barTitle": "Align left" - }, { - "label": "Center", - "value": "center", - "barIcon": "TextAlignCenter", - "barTitle": "Align center" - }, { - "label": "Right", - "value": "right", - "barIcon": "TextAlignRight", - "barTitle": "Align right" - }, { - "label": "Justify", - "value": "justify", - "barIcon": "TextAlignJustify", - "barTitle": "Justify text" - }] + "options": [ + { + "label": "Left", + "value": "left", + "barIcon": "TextAlignLeft", + "barTitle": "Align left" + }, + { + "label": "Center", + "value": "center", + "barIcon": "TextAlignCenter", + "barTitle": "Align center" + }, + { + "label": "Right", + "value": "right", + "barIcon": "TextAlignRight", + "barTitle": "Align right" + }, + { + "label": "Justify", + "value": "justify", + "barIcon": "TextAlignJustify", + "barTitle": "Justify text" + } + ] } ] }, @@ -1165,7 +1205,15 @@ "type": "select", "label": "Card Width", "key": "cardWidth", - "options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"], + "options": [ + "24rem", + "28rem", + "32rem", + "40rem", + "48rem", + "60rem", + "100%" + ], "defaultValue": "32rem" }, { @@ -1785,11 +1833,7 @@ "icon": "Form", "hasChildren": true, "illegalChildren": ["section", "form"], - "actions": [ - "ValidateForm", - "ClearForm", - "ChangeFormStep" - ], + "actions": ["ValidateForm", "ClearForm", "ChangeFormStep"], "styles": ["size"], "settings": [ { @@ -1816,7 +1860,8 @@ { "label": "Medium", "value": "spectrum--medium" - }, { + }, + { "label": "Large", "value": "spectrum--large" } @@ -1833,7 +1878,7 @@ "context": [ { "type": "static", - "values": [ + "values": [ { "label": "Value", "key": "__value" @@ -1947,27 +1992,32 @@ "defaultValue": "left", "showInBar": true, "barStyle": "buttons", - "options": [{ - "label": "Left", - "value": "left", - "barIcon": "TextAlignLeft", - "barTitle": "Align left" - }, { - "label": "Center", - "value": "center", - "barIcon": "TextAlignCenter", - "barTitle": "Align center" - }, { - "label": "Right", - "value": "right", - "barIcon": "TextAlignRight", - "barTitle": "Align right" - }, { - "label": "Justify", - "value": "justify", - "barIcon": "TextAlignJustify", - "barTitle": "Justify text" - }] + "options": [ + { + "label": "Left", + "value": "left", + "barIcon": "TextAlignLeft", + "barTitle": "Align left" + }, + { + "label": "Center", + "value": "center", + "barIcon": "TextAlignCenter", + "barTitle": "Align center" + }, + { + "label": "Right", + "value": "right", + "barIcon": "TextAlignRight", + "barTitle": "Align right" + }, + { + "label": "Justify", + "value": "justify", + "barIcon": "TextAlignJustify", + "barTitle": "Justify text" + } + ] } ] }, @@ -2480,15 +2530,42 @@ "styles": ["size"], "editable": true, "draggable": false, - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, + { + "type": "field", + "label": "Latitude Key", + "key": "latitudeKey", + "dependsOn": "dataProvider" + }, + { + "type": "field", + "label": "Longitude Key", + "key": "longitudeKey", + "dependsOn": "dataProvider" + }, + { + "type": "field", + "label": "Title Key", + "key": "titleKey", + "dependsOn": "dataProvider" + }, + { + "type": "event", + "label": "On marker click", + "key": "onMarkerClick", + "context": [ + { + "label": "Clicked marker", + "key": "marker" + } + ] + }, { "type": "boolean", "label": "Enable Fullscreen", @@ -2512,23 +2589,8 @@ "label": "Zoom Level (0-100)", "key": "zoomLevel", "defaultValue": 72, - "max" : 100, - "min" : 0 - }, - { - "type": "field", - "label": "Latitude Key", - "key": "latitudeKey" - }, - { - "type": "field", - "label": "Longitude Key", - "key": "longitudeKey" - }, - { - "type": "field", - "label": "Title Key", - "key": "titleKey" + "max": 100, + "min": 0 }, { "type": "text", @@ -2538,7 +2600,7 @@ }, { "type": "text", - "label": "Default Location (lat,lng)", + "label": "Default Location", "key": "defaultLocation", "defaultValue": "51.5072,-0.1276" }, @@ -2710,15 +2772,15 @@ ], "context": { "type": "static", - "values": [ + "values": [ { "label": "Rows", "key": "rows" }, - { - "label": "Extra Info", - "key": "info" - }, + { + "label": "Extra Info", + "key": "info" + }, { "label": "Rows Length", "key": "rowsLength" @@ -3192,7 +3254,6 @@ "key": "cardDescription", "label": "Description", "nested": true - }, { "type": "text", @@ -3457,12 +3518,12 @@ { "type": "static", "suffix": "provider", - "values": [ + "values": [ { "label": "Rows", "key": "rows" }, - { + { "label": "Extra Info", "key": "info" }, @@ -3483,12 +3544,12 @@ { "type": "static", "suffix": "repeater", - "values": [ + "values": [ { "label": "Row Index", "key": "index" } - ] + ] }, { "type": "schema", diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index e4176587ee..d9af295108 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -1,6 +1,7 @@