Files
windmill/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
T
Diego Imbert c394a47aba feat: UX improvements (all inputs)
* Monaco transparent bg

* started improving input transform form

* always show static/f selector

* fix connecting btn changing size

* pretty Fill Inputs button

* ResizeTransitionWrapper

* Prettier TemplateEditor

* prevent double onpointerdown when clicking button to close

* text hint

* force focus border for TemplateEditor

* styling in js mode

* update select style

* fix jittery fake monaco placeholder

* select nits

* aiproviderpicker + nits

* smaller ${...} badge

* no-default-style

* select dropdown slide

* nit

* Refresh button in flow picker quick

* jsonEditor pretty

* ai provider toggle button more

* change resource edit button pos

* ResourcePicker Add and Refresh btn

* fix scrollbar

* Fix FileInput and S3 Arg Input

* fix textarea styling

* nicer refresh button in Test This Step

* fix togglebutton border in darkmode

* rounded nit

* Fix multiselect styling

* Prevent crash when selecting dyn-multiselect

* missing $derived and $state => reactivity issue when switching between DynSelect and DynMultiselect

* forgot $effect.pre

* fix nested objects

* nits

* prettier json toggle and array inputs

* array input nits

* nit

* fix json toggle appearing in fileinputs

* nit

* started updating PropertyEditor

* (stash) fix select dropdown animation teleporting from bottom to top

* nit

* nit

* resize transition in schemaform

* nit

* nit typo

* nit enableFlyTransition

* shadow nit

* small consistency changes

* user setting nit

* resize transition in module preview form

* more space

* nit readability on hover

* DateTimeInput new style

* nit fix

* remove yPadding in template and simple editor

* nits

* Revert "remove yPadding in template and simple editor"

This reverts commit 8f27c8d0b8.

* nit

* Fix proppicker border

* fix inconsistent spacing btw arginput and input transform form field headers

* consistent add item button

* nit

* s3 settings nits

* RunsFilter fix

* gray ${...} badge

* border fix darkmode

* nit

* nit app editor consistency

* fix step input gen style

* nit fix

* nits

* toggle border

* nit toggle button

* nit font-medium

* nit font-medium

* nit font-medium

* nit font-medium

* nit

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
2025-09-27 21:52:13 +00:00

49 lines
1.4 KiB
Svelte

<script lang="ts">
import Button from '$lib/components/common/button/Button.svelte'
import { ChevronDown } from 'lucide-svelte'
$: opened = false
</script>
<div class="text-xs flex flex-row-reverse">
<Button
on:click={() => {
opened = !opened
}}
color="light"
variant="divider"
size="xs2"
endIcon={{ icon: ChevronDown, classes: `rotate-0 duration-300 ${opened ? '!rotate-180' : ''}` }}
btnClasses="text-hint font-normal pt-1"
>
Help
</Button>
</div>
{#if opened}
<div
class="bg-surface-secondary border-l-4 text-sm text-secondary p-4 mt-2"
role="alert"
id="dynamic-input-help-box"
>
Single JavaScript expression. The following functions and objects are available:
<ul class="ml-4">
<li
><b>{'results.<id>'}</b>: the result of step at id 'id' (use <b>{'results?.<id>'}</b> if id may
not exist because branch was not chosen)</li
>
<li><b>flow_input</b>: the object containing the flow input arguments</li>
<li><b>previous_result</b>: the result of previous step</li>
<li><b>params</b>: the object containing the current step static values</li>
<li>
<b>variable(path)</b>: the function returning the variable (including secrets) at given path
as a string
</li>
<li>
<b>resource(path)</b>: the function returning the resource at a given path as an object
</li>
</ul>
If using multiple statements, the last statement shall finish with a return. e.g: `return x`
</div>
{/if}