wip
This commit is contained in:
parent
4b52508625
commit
7b52811f10
|
@ -157,8 +157,6 @@
|
|||
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--grey-4);
|
||||
|
||||
transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
if (["string", "number", "boolean"].includes(schema.type)) {
|
||||
newScalarDescendants.push(path.join("."))
|
||||
newScalarDescendants.push({ name: path.join("."), type: schema.type })
|
||||
} else if (schema.type === "json") {
|
||||
Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) =>
|
||||
getScalarDescendantFromSchema([...path, childName], childSchema))
|
||||
|
@ -39,24 +39,26 @@
|
|||
|
||||
{#if scalarDescendants.length > 0}
|
||||
<Section>
|
||||
Examples of scalar descendants of this object are:
|
||||
{#if scalarDescendants[0]}
|
||||
<Block>{scalarDescendants[0]}</Block>
|
||||
{/if}
|
||||
{#if scalarDescendants.length === 2}
|
||||
{" and "}
|
||||
{:else if scalarDescendants.length === 3}
|
||||
{", "}
|
||||
{/if}
|
||||
{#if scalarDescendants[1]}
|
||||
<Block>{scalarDescendants[1]}</Block>
|
||||
{/if}
|
||||
{#if scalarDescendants.length === 3}
|
||||
{" and "}
|
||||
{/if}
|
||||
{#if scalarDescendants[2]}
|
||||
<Block>{scalarDescendants[2]}</Block>
|
||||
{/if}
|
||||
Examples scalar descendants of this object:
|
||||
<br />
|
||||
|
||||
{#each scalarDescendants as descendant}
|
||||
<div class="example">
|
||||
<Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
|
||||
</div>
|
||||
{/each}
|
||||
</Section>
|
||||
{/if}
|
||||
</Subject>
|
||||
|
||||
<style>
|
||||
.example {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
<span class="block">
|
||||
<script>
|
||||
export let truncate = false
|
||||
export let noShrink = false
|
||||
</script>
|
||||
<span class:truncate class:noShrink class="block">
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
|
@ -11,4 +15,14 @@
|
|||
color: var(--ink);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.noShrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -8,4 +8,8 @@
|
|||
margin-bottom: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section :global(ul) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -9,7 +9,6 @@
|
|||
<Line>
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
|
||||
on:mouseleave={() => setExplanationSubject(subjects.none)}
|
||||
>Scalar JSON values</InfoWord>
|
||||
<Text
|
||||
value=" can be used with this component if their individual types are supported"
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 4px;
|
||||
row-gap: 3px;
|
||||
}
|
||||
|
||||
.noWrap {
|
||||
|
|
Loading…
Reference in New Issue