diff --git a/lerna.json b/lerna.json index 386fbe425a..81b35e2a6e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.14.4", + "version": "2.14.5", "npmClient": "yarn", "packages": [ "packages/*", diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 2d62a0667e..b05b127b1c 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -85,7 +85,6 @@ const INITIAL_FRONTEND_STATE = { selectedScreenId: null, selectedComponentId: null, selectedLayoutId: null, - hoverComponentId: null, // Client state selectedComponentInstance: null, @@ -93,6 +92,9 @@ const INITIAL_FRONTEND_STATE = { // Onboarding onboarding: false, tourNodes: null, + + // UI state + hoveredComponentId: null, } export const getFrontendStore = () => { @@ -1413,6 +1415,18 @@ export const getFrontendStore = () => { return state }) }, + hover: (componentId, notifyClient = true) => { + if (componentId === get(store).hoveredComponentId) { + return + } + store.update(state => { + state.hoveredComponentId = componentId + return state + }) + if (notifyClient) { + store.actions.preview.sendEvent("hover-component", componentId) + } + }, }, links: { save: async (url, title) => { diff --git a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte index bd28347e08..2941821dec 100644 --- a/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte +++ b/packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte @@ -6,7 +6,7 @@ import { Helpers } from "@budibase/bbui" import { derived, writable } from "svelte/store" import { Utils } from "@budibase/frontend-core" - import { cloneDeep } from "lodash" + import { cloneDeep, isEqual } from "lodash" export let componentInstance export let componentBindings @@ -21,21 +21,32 @@ const currentStep = derived(multiStepStore, state => state.currentStep) const componentType = "@budibase/standard-components/multistepformblockstep" + let cachedValue + let cachedInstance = {} + + $: if (!isEqual(cachedValue, value)) { + cachedValue = value + } + + $: if (!isEqual(componentInstance, cachedInstance)) { + cachedInstance = componentInstance + } + setContext("multi-step-form-block", multiStepStore) - $: stepCount = value?.length || 0 + $: stepCount = cachedValue?.length || 0 $: updateStore(stepCount) - $: dataSource = getDatasourceForProvider($currentAsset, componentInstance) + $: dataSource = getDatasourceForProvider($currentAsset, cachedInstance) $: emitCurrentStep($currentStep) $: stepLabel = getStepLabel($multiStepStore) $: stepDef = getDefinition(stepLabel) - $: stepSettings = value?.[$currentStep] || {} + $: stepSettings = cachedValue?.[$currentStep] || {} $: defaults = Utils.buildMultiStepFormBlockDefaultProps({ - _id: componentInstance._id, + _id: cachedInstance._id, stepCount: $multiStepStore.stepCount, currentStep: $multiStepStore.currentStep, - actionType: componentInstance.actionType, - dataSource: componentInstance.dataSource, + actionType: cachedInstance.actionType, + dataSource: cachedInstance.dataSource, }) $: stepInstance = { _id: Helpers.uuid(), diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte index 1d2a1b9617..9928f19a7f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte @@ -108,6 +108,8 @@ {componentInstance} {componentDefinition} {bindings} + iconTooltip={componentName} + componentTitle={title} /> {/if} {#if section == "conditions"} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte index 59c1b5c620..d8508619f3 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte @@ -5,6 +5,9 @@ Drawer, Button, notifications, + AbsTooltip, + Icon, + Body, } from "@budibase/bbui" import { selectedScreen, store } from "builderStore" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte" @@ -15,6 +18,9 @@ } from "builderStore/dataBinding" export let componentInstance + export let componentDefinition + export let iconTooltip + export let componentTitle let tempValue let drawer @@ -24,6 +30,8 @@ $store.selectedComponentId ) + $: icon = componentDefinition?.icon + const openDrawer = () => { tempValue = runtimeToReadableBinding( bindings, @@ -54,7 +62,19 @@ {#key componentInstance?._id} - Custom CSS overrides all other component styles. +
+ Your CSS will overwrite styles for: + {#if icon} + + + + {componentTitle || ""} + {/if} +
{/key} + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 65ea172012..2127392bb9 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -36,14 +36,12 @@ // Determine selected component ID $: selectedComponentId = $store.selectedComponentId - $: hoverComponentId = $store.hoverComponentId $: previewData = { appId: $store.appId, layout, screen, selectedComponentId, - hoverComponentId, theme: $store.theme, customTheme: $store.customTheme, previewDevice: $store.previewDevice, @@ -119,8 +117,8 @@ error = event.error || "An unknown error occurred" } else if (type === "select-component" && data.id) { $store.selectedComponentId = data.id - } else if (type === "hover-component" && data.id) { - $store.hoverComponentId = data.id + } else if (type === "hover-component") { + store.actions.components.hover(data.id, false) } else if (type === "update-prop") { await store.actions.components.updateSetting(data.prop, data.value) } else if (type === "update-styles") { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte index aeaa577455..052c06b213 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte @@ -7,6 +7,7 @@ $: definition = store.actions.components.getDefinition(component?._component) $: noPaste = !$store.componentToPaste $: isBlock = definition?.block === true + $: canEject = !(definition?.ejectable === false) const keyboardEvent = (key, ctrlKey = false) => { document.dispatchEvent( @@ -32,7 +33,7 @@ > Delete - {#if isBlock} + {#if isBlock && canEject} { - componentToEject = component - confirmEjectDialog.show() + const definition = store.actions.components.getDefinition( + component._component + ) + const isBlock = definition?.block === true + const canEject = !(definition?.ejectable === false) + if (isBlock && canEject) { + componentToEject = component + confirmEjectDialog.show() + } }, ["Ctrl+Enter"]: () => { $goto(`./:componentId/new`) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte index 8d4d64e4be..315c0a331e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte @@ -90,16 +90,7 @@ return findComponentPath($selectedComponent, component._id)?.length > 0 } - const handleMouseover = componentId => { - if ($store.hoverComponentId !== componentId) { - $store.hoverComponentId = componentId - } - } - const handleMouseout = componentId => { - if ($store.hoverComponentId === componentId) { - $store.hoverComponentId = null - } - } + const hover = store.actions.components.hover