fcb6ced8df
* feat: captures * flow UI and improvements * fix: build * fix sqlx * Move Capture WIP * Add capture to webhook and websocket * Move connection status viewer in the head * change trigger section label * Add popover capture picker using melt ui * Add shortcut to triggers capture from input form * remove capture tab in input * Allways show capture * remove useless logs * Add email capture * Add kafka capture into triggers * Add edit option in capture table * use light header for arg input * Add prefilled group id * Change button label * fix logic * Open resource drawer if prototype has fields * fix default completion * Change name Prototype * Dissociate Editor Mode for triggers * Fix bug for script * Fix apply args * fix apply schema * Add capture table to script * fix apply args * Add capture button for script * Delete capture tab * Set capture on when opening triggers capture * fix connection indicator * fix minor issues * Add preprocessor logic * Use slot in log Panel for captures * handle capture refresh in script * Delete capture tab from script editor * reset kafka resource on toggle static * fix minor issue * Allow resource in kafka capture * use simple capture button in flow * Remove capture panel * Polish route trigger editor * Fix resource saving * Remove excessive padding * merge nits * add workflow_dispatch to build * add workflow_dispatch to build * better capture UI * fix sqlx * fix build * fix build * build * make initial_messages optional in line with db * fix npm check * better handle args for capture webhook and http * improve migration + http capture fixes * fix sqlx * update ee ref --------- Co-authored-by: Guilhem <guilhemlemouel@gmail.com> Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com> Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
68 lines
1.9 KiB
Svelte
68 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import { Tab } from '@rgossiaux/svelte-headlessui'
|
|
import type { ToggleButtonContext } from './ToggleButtonGroup.svelte'
|
|
import { twMerge } from 'tailwind-merge'
|
|
import Popover from '$lib/components/Popover.svelte'
|
|
|
|
import { Info } from 'lucide-svelte'
|
|
|
|
export let value: any
|
|
export let label: string | undefined = undefined
|
|
export let iconOnly: boolean = false
|
|
export let tooltip: string | undefined = undefined
|
|
export let icon: any | undefined = undefined
|
|
export let disabled: boolean = false
|
|
export let selectedColor: string = '#3b82f6'
|
|
export let small = false
|
|
export let light = false
|
|
export let iconProps: Record<string, any> = {}
|
|
export let showTooltipIcon: boolean = false
|
|
export let documentationLink: string | undefined = undefined
|
|
export let id: string | undefined = undefined
|
|
|
|
const { select, selected } = getContext<ToggleButtonContext>('ToggleButtonGroup')
|
|
</script>
|
|
|
|
<Popover
|
|
notClickable
|
|
class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
|
|
disablePopup={tooltip === undefined}
|
|
disappearTimeout={0}
|
|
{documentationLink}
|
|
>
|
|
<div {id} class="flex">
|
|
<Tab
|
|
{disabled}
|
|
class={twMerge(
|
|
' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
|
|
small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
|
|
light ? 'font-medium' : '',
|
|
$selected === value
|
|
? 'bg-surface shadow-md'
|
|
: 'bg-surface-secondary hover:bg-surface-hover',
|
|
$$props.class
|
|
)}
|
|
on:click={() => select(value)}
|
|
>
|
|
{#if icon}
|
|
<svelte:component
|
|
this={icon}
|
|
size={small ? 12 : 14}
|
|
color={$selected === value ? selectedColor : '#9CA3AF'}
|
|
{...iconProps}
|
|
/>
|
|
{/if}
|
|
{#if label && !iconOnly}
|
|
{label}
|
|
{/if}
|
|
{#if showTooltipIcon}
|
|
<Info size={14} class="text-gray-400" />
|
|
{/if}
|
|
</Tab>
|
|
</div>
|
|
<svelte:fragment slot="text">
|
|
{tooltip}
|
|
</svelte:fragment>
|
|
</Popover>
|