diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index b967d3a3b2..2a0c8a3017 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -20,6 +20,7 @@
import type { FlowEditorContext } from './flows/types'
import { cleanInputs } from './flows/utils'
import { Pen } from 'lucide-svelte'
+ import Kbd from './common/kbd/Kbd.svelte'
export let initialPath: string = ''
export let selectedId: string | undefined
@@ -362,6 +363,7 @@
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index 268a8da43a..e2fe28c495 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -77,6 +77,7 @@
}
}
}
+
$: if (
componentInput &&
componentInput.type == 'runnable' &&
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 125d2fa066..54e39e1e6e 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -33,7 +33,15 @@
onClick?: () => void
href?: string
}
- export let dropdownItems: MenuItem[] | undefined = undefined
+ export let dropdownItems: MenuItem[] | (() => MenuItem[]) | undefined = undefined
+
+ function computeDropdowns(): MenuItem[] | undefined {
+ if (typeof dropdownItems === 'function') {
+ return dropdownItems()
+ } else {
+ return dropdownItems
+ }
+ }
const dispatch = createEventDispatcher()
// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
@@ -80,19 +88,6 @@
$: buttonProps = {
id,
- class: twMerge(
- 'w-full',
- colorVariants?.[color]?.[variant],
- variant === 'border' ? 'border' : '',
- ButtonType.FontSizeClasses[size],
- ButtonType.SpacingClasses[spacingSize][variant],
- 'focus:ring-2 font-semibold',
- dropdownItems ? 'rounded-l-md h-full' : 'rounded-md',
- 'justify-center items-center text-center whitespace-nowrap inline-flex',
- btnClasses,
- disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '',
- 'transition-all '
- ),
href,
target,
tabindex: disabled ? -1 : 0,
@@ -121,6 +116,21 @@
$: isSmall = size === 'xs' || size === 'sm'
$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes)
$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes)
+
+ function computeClass() {
+ return twMerge(
+ 'w-full',
+ colorVariants?.[color]?.[variant],
+ variant === 'border' ? 'border' : '',
+ ButtonType.FontSizeClasses[size],
+ ButtonType.SpacingClasses[spacingSize][variant],
+ 'focus:ring-2 font-semibold',
+ dropdownItems ? 'rounded-l-md h-full' : 'rounded-md',
+ 'justify-center items-center text-center whitespace-nowrap inline-flex',
+ btnClasses,
+ 'transition-all '
+ )
+ }
@@ -131,6 +141,10 @@
on:click={onClick}
on:focus
on:blur
+ class={twMerge(
+ computeClass(),
+ disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+ )}
{...buttonProps}
disabled={disabled || loading}
type="submit"
@@ -151,12 +165,14 @@
{#if dropdownItems}
-