mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-09 00:04:10 +00:00
82 lines
2.2 KiB
Svelte
82 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher, getContext, untrack } from 'svelte'
|
|
import Popover from '$lib/components/meltComponents/Popover.svelte'
|
|
import Label from '../Label.svelte'
|
|
import { offset, flip, shift } from 'svelte-floating-ui/dom'
|
|
import Button from '../common/button/Button.svelte'
|
|
import OneOfInputSpecsEditor from '../apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte'
|
|
import type { AppViewerContext, GridItem, RichConfiguration } from '../apps/types'
|
|
import { findGridItem } from '../apps/editor/appUtilsCore'
|
|
|
|
const { selectedComponent, app } = getContext<AppViewerContext>('AppViewerContext')
|
|
|
|
type Dataset = {
|
|
value: RichConfiguration
|
|
name: string
|
|
type: 'bar' | 'scatter' | 'line' | 'area' | 'range-bar' | 'range-area'
|
|
}
|
|
|
|
let component = $state(undefined) as GridItem | undefined
|
|
|
|
$effect(() => {
|
|
if (component === undefined && $selectedComponent && $app) {
|
|
untrack(() => {
|
|
component = findGridItem($app, $selectedComponent[0])
|
|
})
|
|
}
|
|
})
|
|
|
|
let isEE = $derived(component?.data?.type === 'agchartscomponentee')
|
|
|
|
interface Props {
|
|
value?: Dataset | undefined
|
|
trigger?: import('svelte').Snippet
|
|
}
|
|
|
|
let { value = $bindable(undefined), trigger }: Props = $props()
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
function removeDataset() {
|
|
dispatch('remove')
|
|
}
|
|
|
|
const trigger_render = $derived(trigger)
|
|
</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 gap-4 p-4 max-h-[70vh] overflow-y-auto">
|
|
<Label label="Name">
|
|
<input type="text" bind:value={value.name} />
|
|
</Label>
|
|
|
|
<OneOfInputSpecsEditor
|
|
key={'Data'}
|
|
bind:oneOf={value.value}
|
|
id={$selectedComponent?.[0] ?? ''}
|
|
shouldCapitalize={true}
|
|
resourceOnly={false}
|
|
inputSpecsConfiguration={value.value?.['configuration']}
|
|
labels={value.value?.['labels']}
|
|
tooltip={value.value?.['tooltip']}
|
|
disabledOptions={isEE ? [] : ['range-bar', 'range-area']}
|
|
/>
|
|
|
|
<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
|
|
</div>
|
|
{/if}
|
|
{/snippet}
|
|
</Popover>
|