Files
windmill/frontend/src/lib/components/wizards/ChartJSWizard.svelte
Guilhem ded54f2e68 fix(frontend): improve flow editor settings bar UX (#6049)
* move settings and static inputs into top node

* Move test button in the top nodes

* Revert "Move test button in the top nodes"

This reverts commit 1c8648a538.

* Add error handler to top toolbar

* nit

* polishing

* add flow settings to topbar dropdown

* remove unused files

* progress

* progress

* fixes

* fix

* fix

* fix

* fix

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
2025-06-27 15:26:03 +00:00

71 lines
2.0 KiB
Svelte

<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte'
import Label from '../Label.svelte'
import { offset, flip, shift } from 'svelte-floating-ui/dom'
import Button from '../common/button/Button.svelte'
import InputsSpecEditor from '../apps/editor/settingsPanel/InputsSpecEditor.svelte'
import type { AppViewerContext, RichConfiguration } from '../apps/types'
import Popover from '$lib/components/meltComponents/Popover.svelte'
const { selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
type Dataset = {
value: RichConfiguration
name: string
}
interface Props {
value?: Dataset | undefined
trigger?: import('svelte').Snippet
}
let { value = $bindable(undefined), trigger: trigger_render }: Props = $props()
const dispatch = createEventDispatcher()
function removeDataset() {
dispatch('remove')
}
</script>
<Popover
floatingConfig={{
strategy: 'fixed',
placement: 'left-end',
middleware: [offset(8), flip(), shift()]
}}
closeOnOtherPopoverOpen
>
{#snippet trigger()}
{@render trigger_render?.()}
{/snippet}
{#snippet content()}
{#if value}
<div class="flex flex-col w-96 p-4 gap-4 max-h-[70vh] overflow-y-auto">
<Label label="Name">
<input type="text" bind:value={value.name} />
</Label>
<InputsSpecEditor
key={'Data'}
bind:componentInput={value.value}
id={$selectedComponent?.[0] ?? ''}
userInputEnabled={false}
shouldCapitalize={true}
resourceOnly={false}
fieldType={value.value?.['fieldType']}
subFieldType={value.value?.['subFieldType']}
format={value.value?.['format']}
selectOptions={value.value?.['selectOptions']}
tooltip={value.value?.['tooltip']}
fileUpload={value.value?.['fileUpload']}
placeholder={value.value?.['placeholder']}
customTitle={value.value?.['customTitle']}
displayType={false}
/>
<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
</div>
{/if}
{/snippet}
</Popover>