Show calculated fields with different color

src/lib/editor/form/FieldTitle.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
  import type { UIModelField } from "$lib/editor/form/utils/model.js";
+ import Tooltip from "$lib/ui/Tooltip.svelte";
+ import CalculatedIcon from "$lib/ui/icons/CalculatedIcon.svelte";
  import { Hashtag, Icon } from "svelte-hero-icons";
  export let field: UIModelField<unknown>;
 
@@ -10,6 +12,17 @@
  {#if field.parent?.isArray()}
  <Icon src={Hashtag} class="h-3 text-grey-5 mr-1" /> {arrayTitle} {Number(field.key) + 1}
  {:else}
- {field.schema.title || field.key}
+ <span class:text-blue-500={field.is.calculated}>{field.schema.title || field.key}</span>
+ {#if field.is.calculated}
+ <span class="ml-2 text-blue-500">
+ <Tooltip
+ label="This is a calculated field. It will be generated by the builder if missing."
+ bgClass="bg-blue-300"
+ delay={1000}
+ >
+ <CalculatedIcon />
+ </Tooltip>
+ </span>
+ {/if}
  {/if}
 </span>

src/lib/editor/form/LeafField.svelte

@@ -5,14 +5,13 @@
  import FieldTitle from "./FieldTitle.svelte";
  import EditableField from "./EditableField.svelte";
  import EditableFieldKey from "./EditableFieldKey.svelte";
- import CalculatedField from "./CalculatedField.svelte";
 
  export let parseValue: (value: SchemaValue) => SchemaValue;
  export let parseKey: ((key: SchemaValue) => string) | undefined = undefined;
  export let field: UIModelField<string>;
 </script>
 
-<Tooltip label={field.schema.description} delay={200} containerClass="block w-full">
+<Tooltip label={field.schema.description} delay={1000} placement="bottom" containerClass="block w-full">
  <div class="flex items-stretch justify-between w-full gap-2">
  <div class="flex items-start justify-start">
  {#if field.is.editableKey}
@@ -22,11 +21,7 @@
  {/if}
  </div>
  <div class="flex items-start justify-start w-[248px]">
- {#if field.is.editable}
- <EditableField {field} {parseValue} />
- {:else if field.is.calculated}
- <CalculatedField {field} />
- {/if}
+ <EditableField {field} {parseValue} />
  </div>
  </div>
 </Tooltip>

src/lib/ui/Tooltip.svelte

@@ -2,11 +2,14 @@
  import { writable } from "svelte/store";
  import { offset, flip, shift } from "@floating-ui/dom";
  import { createFloatingActions, arrow } from "svelte-floating-ui";
+ import type { Placement } from "@floating-ui/utils";
+
+ export let placement: Placement = "top";
 
  const arrowRef = writable<HTMLElement>();
  const [floatingRef, floatingContent] = createFloatingActions({
  strategy: "fixed",
- placement: "top",
+ placement,
  middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowRef })],
  onComputed({ placement, middlewareData }) {
  const { x, y } = middlewareData.arrow || { x: undefined, y: undefined };
@@ -30,8 +33,9 @@
  export let label: string | undefined = undefined;
  export let delay: number | undefined = undefined;
  export let containerClass = "inline-block";
+ export let bgClass = "bg-gray-900";
 
- $: delayClasses = delay ? `transition-all ease-in-out duration-300 delay-[${delay}ms]` : "";
+ $: delayClasses = delay ? `transition-all ease-in-out duration-300 delay-${delay}` : "";
 
  let showTooltip = false;
 </script>
@@ -43,7 +47,8 @@
  role="contentinfo"
  class={containerClass}
  use:floatingRef
- on:mouseenter={() => {
+ on:mouseenter={(event) => {
+ event.stopPropagation();
  showTooltip = true;
  }}
  on:mouseleave={() => {
@@ -54,7 +59,7 @@
  </div>
 
  <div
- class="py-1 px-2 text-xs text-white bg-gray-900 rounded-lg {delayClasses}"
+ class="py-1 px-2 text-xs text-white {bgClass} rounded-lg {delayClasses} z-20"
  class:visible={showTooltip}
  class:invisible={!showTooltip}
  class:opacity-100={showTooltip}
@@ -66,6 +71,6 @@
  {:else}
  <slot name="content" />
  {/if}
- <div class="bg-gray-900 w-2 h-2 absolute rotate-45" bind:this={$arrowRef} />
+ <div class="{bgClass} w-2 h-2 absolute rotate-45" bind:this={$arrowRef} />
  </div>
 {/if}

src/lib/ui/icons/CalculatedIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="currentColor"
+ class="w-5 h-5"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z"
+ />
+</svg>