69 lines
1.5 KiB
Svelte
69 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte'
|
|
import { Button } from '../common'
|
|
import { CornerDownLeft } from 'lucide-svelte'
|
|
import Popover from '$lib/components/meltComponents/Popover.svelte'
|
|
|
|
let name: string = $state('')
|
|
interface Props {
|
|
customName?: string | undefined
|
|
disabled?: boolean
|
|
trigger?: import('svelte').Snippet
|
|
noPopover?: boolean
|
|
}
|
|
|
|
let { customName = undefined, disabled = false, trigger, noPopover }: Props = $props()
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
function addField() {
|
|
dispatch('add', { name })
|
|
name = ''
|
|
}
|
|
|
|
const trigger_render = $derived(trigger)
|
|
</script>
|
|
|
|
{#snippet form({ close })}
|
|
<div class="flex flex-row gap-2 p-2 rounded-md">
|
|
<input
|
|
bind:value={name}
|
|
class="max-w-80"
|
|
placeholder={`${customName ?? 'Field'} name`}
|
|
onkeydown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
addField()
|
|
close()
|
|
}
|
|
}}
|
|
{disabled}
|
|
/>
|
|
<Button
|
|
variant="accent"
|
|
size="xs"
|
|
id="flow-editor-add-property"
|
|
on:click={() => {
|
|
addField()
|
|
close()
|
|
}}
|
|
disabled={!name || disabled}
|
|
shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
|
|
>
|
|
Add {customName ? customName.toLowerCase() : 'field'}
|
|
</Button>
|
|
</div>
|
|
{/snippet}
|
|
|
|
{#if noPopover}
|
|
{@render form({ close: () => {} })}
|
|
{:else}
|
|
<Popover closeButton={false} class="w-full" {disabled}>
|
|
{#snippet trigger()}
|
|
{@render trigger_render?.()}
|
|
{/snippet}
|
|
{#snippet content({ close })}
|
|
{@render form({ close })}
|
|
{/snippet}
|
|
</Popover>
|
|
{/if}
|