console/src/lib/elements/forms/inputLine.svelte

<script lang="ts">
    import { Icon, Layout } from '@appwrite.io/pink-svelte';
    import InputPoint from './inputPoint.svelte';
    import Button from './button.svelte';
    import { IconPlus } from '@appwrite.io/pink-icons-svelte';

    export let values: number[][];
    export let nullable: boolean;
    export let disableDeletePointsCountPerLine: number = 2;
    export let onAddPoint: (index: number) => void;
    export let onDeletePoint: (index: number) => void = undefined;

    let required = true;

    $: required = nullable;
    let disableDeletePoints = false;
    $: disableDeletePoints = !values || values.length <= disableDeletePointsCountPerLine;
</script>

<Layout.Stack alignItems="flex-start">
    <Layout.Stack>
        {#each values as value, index}
            <InputPoint
                nullable={required}
                values={value}
                deletePoints={true}
                disableDelete={disableDeletePoints}
                onDeletePoint={() => onDeletePoint(index)} />
        {/each}
    </Layout.Stack>
    <Button compact on:click={() => onAddPoint(-1)} disabled={nullable}>
        <Icon icon={IconPlus} size="s" /> Add coordinate
    </Button>
</Layout.Stack>