110 lines
3.1 KiB
Svelte
110 lines
3.1 KiB
Svelte
<script>
|
|
import Text from "./elements/Text.svelte";
|
|
import Reference from "./elements/Reference.svelte";
|
|
import ReferenceInline from "./elements/ReferenceInline.svelte";
|
|
import Block from "./block/Block.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 FieldHeader from "./elements/FieldHeader.svelte";
|
|
import ReferenceTable from "./elements/ReferenceTable.svelte";
|
|
|
|
const formElements = {
|
|
text: Text,
|
|
textarea: Textarea,
|
|
rich: RichEditor,
|
|
color: Color,
|
|
checkbox: Checkbox,
|
|
number: Number,
|
|
url: Url,
|
|
date: Date,
|
|
datetime: Datetime,
|
|
uuid: UUID,
|
|
json: Json,
|
|
};
|
|
|
|
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 {schema} {field} {id}/>
|
|
{#if field.info.name === "reference" && field.layout === "inline"}
|
|
<ReferenceInline
|
|
bind:graph
|
|
{record}
|
|
{schema}
|
|
{field}
|
|
{validationErrors}
|
|
/>
|
|
{:else if field.info.name === "reference" && field.layout === "table"}
|
|
<ReferenceTable
|
|
bind:graph
|
|
{record}
|
|
{schema}
|
|
{field}
|
|
{validationErrors}
|
|
/>
|
|
{:else if field.info.name === "reference"}
|
|
<Reference
|
|
bind:graph
|
|
{record}
|
|
{schema}
|
|
{field}
|
|
{validationErrors}
|
|
/>
|
|
{:else if field.info.name === "file"}
|
|
<File bind:graph {record} {field} {validationErrors}/>
|
|
{: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 === "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>
|