init

front/js/svelte/content/elements/Checkbox.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let value;
+</script>
+
+{value}

front/js/svelte/content/elements/Color.svelte

@@ -0,0 +1,20 @@
+<script>
+    export let value;
+</script>
+
+{#if value}
+    <div class="d-inline-flex">
+        <span class="color border border-2" style="background:{value}" />
+        {value}
+    </div>
+{/if}
+
+<style>
+    .color {
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+        position: relative;
+        top: 3px;
+    }
+</style>

front/js/svelte/content/elements/Date.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let value;
+</script>
+
+{value}

front/js/svelte/content/elements/File.svelte

@@ -0,0 +1,27 @@
+<script>
+    import Preview from "../../files/Preview.svelte";
+
+    export let record;
+    export let field;
+    export let graph;
+
+
+    let filePreviews = graph.edges?.filter((ed) => ed.field === field.name && ed.source === record.id)
+        .map((ed) => graph.records.find((r) => r.id === ed.target));
+    // if (edges[0]) {
+    //     firstRecord = record._children.find((r) => r.data.id === edges[0].to);
+    // }
+
+    console.log(filePreviews)
+</script>
+
+<!-- {#if firstRecord}
+    <Preview record={firstRecord} size="tiny" />
+{/if} -->
+<div class="d-flex me-1">
+    {#each filePreviews as file}
+        <div class="me-1">
+            <Preview record={file} size="tiny"/>
+        </div>
+    {/each}
+</div>

front/js/svelte/content/elements/Number.svelte

@@ -0,0 +1,6 @@
+<script>
+    export let value;
+    // let display = new Intl.NumberFormat().format(value);
+</script>
+
+{value}

front/js/svelte/content/elements/Reference.svelte

@@ -0,0 +1,35 @@
+<script>
+    import PreviewCardSmall from "../../records/PreviewCardSmall.svelte";
+
+    export let record;
+    export let field;
+    export let schemas;
+    export let graph;
+
+    $: recordEdges =
+        graph.edges
+            ?.filter((ed) => ed.field === field.name && ed.source === record.id)
+            .map((edge) => {
+                return graph.records.find((r) => r.id === edge.target);
+            })
+            .filter((record) => (!record ? false : true)) ?? [];
+
+</script>
+
+<div class="references">
+    {#each recordEdges as recordEdge}
+        <span class="mr-3">
+            <PreviewCardSmall {schemas} {graph} record={recordEdge}/>
+        </span>
+    {/each}
+</div>
+
+<style>
+    div.references {
+        /* max-width: 148px; */
+        max-height: 48px;
+        /* text-overflow: ellipsis; */
+        overflow-x: hidden;
+        overflow-y: hidden;
+    }
+</style>

front/js/svelte/content/elements/Rich.svelte

@@ -0,0 +1,17 @@
+<script>
+    export let value;
+</script>
+
+<div>
+    {value}
+</div>
+
+<style>
+    div {
+        /* max-width: 128px; */
+        max-height: 24px;
+        text-overflow: ellipsis;
+        /* white-space: nowrap; */
+        overflow: hidden;
+    }
+</style>

front/js/svelte/content/elements/Text.svelte

@@ -0,0 +1,17 @@
+<script>
+    export let value;
+</script>
+
+<div title={value} data-bs-toggle="tooltip" data-bs-placement="top">
+    {value}
+</div>
+
+<style>
+    div {
+        /* max-width: 128px; */
+        max-height: 24px;
+        text-overflow: ellipsis;
+        /* white-space: nowrap; */
+        overflow: hidden;
+    }
+</style>

front/js/svelte/content/elements/UUID.svelte

@@ -0,0 +1,11 @@
+<script>
+    export let value;
+    export let field;
+</script>
+<span
+class="badge rounded-pill bg-primary bg-opacity-75"
+style="max-width:64px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;"
+title={value}
+data-bs-toggle="tooltip"
+>{value}</span
+>

front/js/svelte/content/elements/Url.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let value;
+</script>
+
+<a href={value} target="_blank">{value}</a>