115 lines
3.4 KiB
Svelte
115 lines
3.4 KiB
Svelte
<script>
|
|
import Text from "./elements/Text.svelte";
|
|
import Slug from "./elements/Slug.svelte";
|
|
import Reference from "./elements/Reference.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 === "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} /> -->
|
|
<File
|
|
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 if field.info.name === "rich"}
|
|
<RichEditor
|
|
bind:value={data[field.name]}
|
|
{field}
|
|
{validationErrors}
|
|
{record}
|
|
/>
|
|
{:else if field.info.name === "markdown"}
|
|
<Markdown
|
|
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>
|