lucent-laravel/front/js/svelte/records/FormField.svelte

<script>
    import Text from "./form/fields/Text.svelte";
    import Slug from "./form/fields/Slug.svelte";
    import Reference from "./elements/Reference.svelte";
    import ReferenceInline from "./elements/ReferenceInline.svelte";
    import Block from "./block/Block.svelte";
    import Color from "./form/fields/Color.svelte";
    import Checkbox from "./form/fields/Checkbox.svelte";
    import Number from "./form/fields/Number.svelte";
    import Date from "./form/fields/Date.svelte";
    import UUID from "./form/fields/UUID.svelte";
    import File from "./form/references/File.svelte";
    import Textarea from "./form/fields/Textarea.svelte";
    import Datetime from "./form/fields/Datetime.svelte";
    import RichEditor from "./form/fields/RichEditor.svelte";
    import Json from "./form/fields/JSON.svelte";
    import Markdown from "./form/fields/Markdown.svelte";
    import FieldHeader from "./form/FieldHeader.svelte";
    import ReferenceTable from "./elements/ReferenceTable.svelte";
    import ReferenceTags from "./form/references/ReferenceTags.svelte";

    const formElements = {
        text: Text,
        slug: Slug,
        textarea: Textarea,
        rich: RichEditor,
        color: Color,
        checkbox: Checkbox,
        number: Number,
        date: Date,
        datetime: Datetime,
        uuid: UUID,
        json: Json,
        markdown: Markdown,
    };

    export let field;
    export let data;
    export let schema;
    export let record;
    export let graph;
    export let validationErrors;
    export let isCreateMode;
    let formElement = formElements[field.info.name];
    const id = `field-${field.name}-${record.id}`;
</script>

<div class="card editor-field">
    <FieldHeader {field} {id}/>
    {#if field.info.name === "reference" && field.layout === "inline"}
        <ReferenceInline
            bind:graph
            {record}
            {field}
            {validationErrors}
        />
    {:else if field.info.name === "reference" && field.layout === "table"}
        <ReferenceTable
            bind:graph
            {id}
            {record}
            {field}
            {validationErrors}
        />
    {:else if field.info.name === "reference" && field.layout === "tags"}
        <ReferenceTags
                bind:graph
                {id}
                {record}
                {field}
                {validationErrors}
        />
    {:else if ["reference","file"].includes(field.info.name)}
        <File bind:graph {record} {field} />
    {:else if field.info.name === "block"}
        <Block
            bind:graph
            bind:value={data[field.name]}
            {record}
            {id}
            {field}
            {validationErrors}
        />
    {:else if field.info.name === "text"}
        <Text
            bind:value={data[field.name]}
            {field}
            {id}
            {validationErrors}
            {isCreateMode}
        />
    {:else if field.info.name === "slug"}
        <Slug
                bind:value={data[field.name]}
                {field}
                {id}
                {validationErrors}
                {isCreateMode}
        />
    {:else if field.info.name === "textarea"}
        <Textarea
            bind:value={data[field.name]}
            {field}
            {validationErrors}
            {isCreateMode}
            {id}
        />
    {:else}
        <svelte:component
            this={formElement}
            bind:value={data[field.name]}
            {schema}
            {field}
            {validationErrors}
            {isCreateMode}
            {id}
        />
    {/if}
</div>