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

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

    const formElements = {
        text: Text,
        slug: Slug,
        textarea: Textarea,
        rich: RichEditor,
        color: Color,
        checkbox: Checkbox,
        number: Number,
        url: Url,
        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="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 === "tags"}
        <ReferenceTags
                bind:graph
                {id}
                {record}
                {field}
                {validationErrors}
        />
    {:else if field.info.name === "reference"}
        <Reference
            bind:graph
            {id}
            {record}
            {field}
            {validationErrors}
        />
    {:else if field.info.name === "file"}
        <File bind:graph {record} {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 if field.info.name === "rich"}
        <RichEditor
                bind:value={data[field.name]}
                {schema}
                {field}
                {validationErrors}
                {isCreateMode}
                bind:graph
                {record}
        />
    {:else}
        <svelte:component
            this={formElement}
            bind:value={data[field.name]}
            {schema}
            {field}
            {validationErrors}
            {isCreateMode}
            {id}
        />
    {/if}
</div>