FieldView.svelte

<style>

.container :global(.deprecated) {
    font-weight: bold;
    color: crimson;
}

.container :global(.deprecated p) {
    margin-top: 0;
}
</style>
<script>
import { Field } from './model';

import DescriptionView from './DescriptionView.svelte';
import DeprecatedView from './DeprecatedView.svelte';
import FieldSyntaxView from './FieldSyntaxView.svelte';
import TypeRefView from './TypeRefView.svelte';
import FieldArgumentsTableView from './FieldArgumentsTableView.svelte';

export let typeName
export let field
export let pagePath
export let fieldPath
export let showArguments = true

$: console.log("FieldView", {pagePath})
</script>

<div class="container pt-4 pb-6 border-t border-gray-200" id={fieldPath} name={fieldPath}>
    <h3 class="text-md font-medium mb-2"><span class="text-gray-400">{typeName}.</span>{field.name}<!--<span class="text-gray-400">: <TypeRefView {pagePath} typeRef={field.type} /></span>--></h3>
    <FieldSyntaxView {pagePath} {field} />
    {#if field.description}
        <DescriptionView class="description" description={field.description} />
    {/if}
    {#if field.isDeprecated}
        <DescriptionView class="deprecated" deprecated={field.deprecationReason} />
    {/if}
    {#if showArguments && field.args.length}
        <h5 class="text-md font-medium text-gray-600 py-2 mt-2">Arguments</h5>
        <FieldArgumentsTableView {pagePath} {fieldPath} args={field.args} />
    {/if}
</div>