1
0
Fork 0
mirror of synced 2024-09-19 10:48:30 +12:00

array type info

This commit is contained in:
Gerard Burns 2024-04-14 09:47:16 +01:00
parent 2c6dd23df1
commit aba14f0e16
7 changed files with 99 additions and 36 deletions

View file

@ -157,8 +157,6 @@
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0;
overflow: hidden;
border: 1px solid var(--grey-4); border: 1px solid var(--grey-4);
transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in; transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;

View file

@ -1,5 +1,5 @@
<script> <script>
import { Block, Subject, Property, Section } from './components' import { Block, Subject, JSONProperty, Property, Section } from './components'
export let schema export let schema
export let columnName export let columnName
@ -42,9 +42,18 @@
name="Max Value" name="Max Value"
value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo} value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
/> />
{:else if schema.type === "array"}
{#each (schema?.constraints?.inclusion ?? []) as option, index}
<Property
name={`Option ${index + 1}`}
truncate
>
<span style:background-color={schema?.optionColors?.[option]} class="optionCircle" />{option}
</Property>
{/each}
{:else if schema.type === "json"} {:else if schema.type === "json"}
<Property <JSONProperty
pre
name="Schema" name="Schema"
value={JSON.stringify(schema?.schema ?? {}, null, 2)} value={JSON.stringify(schema?.schema ?? {}, null, 2)}
/> />
@ -71,4 +80,14 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.optionCircle {
display: inline-block;
background-color: hsla(0, 1%, 50%, 0.3);
border-radius: 100%;
width: 10px;
height: 10px;
vertical-align: middle;
margin-right: 5px;
}
</style> </style>

View file

@ -0,0 +1,42 @@
<script>
export let name;
export let value;
</script>
<div class="property">
<span class="propertyName">
<slot name="name">
{name}
</slot>
</span>
<span class="propertyDivider">-</span>
<pre class="pre propertyValue">
<slot>
{value}
</slot>
</pre>
</div>
<style>
.property {
margin-bottom: 12px;
}
.propertyName {
font-style: italic;
}
.propertyDivider {
padding: 4px;
}
.pre {
margin: 0;
margin-top: 3px;
padding: 4px;
border-radius: 3px;
width: 250px;
box-sizing: border-box;
background-color: black;
}
</style>

View file

@ -1,45 +1,49 @@
<script> <script>
export let name; export let name;
export let value; export let value;
export let pre; export let truncate = false;
</script> </script>
<div class="property"> <div class:truncate class="property">
{#if pre}
<span class="propertyName">
{name}
</span>
<span class="propertyDivider">-</span>
<pre class="pre propertyValue">
{value}
</pre>
{:else}
<span class="propertyName"> <span class="propertyName">
{name} <slot name="name">
{name}
</slot>
</span> </span>
<span class="propertyDivider">-</span> <span class="propertyDivider">-</span>
<span class="propertyValue"> <span class="propertyValue">
{value} <slot>
{value}
</slot>
</span> </span>
{/if}
</div> </div>
<style> <style>
.propertyDivider { .property {
padding: 4px; max-width: 100%;
}
.propertyName {
font-style: italic;
} }
.pre { .truncate {
margin: 0; display: flex;
margin-top: 3px; align-items: center;
padding: 4px; overflow: hidden;
border-radius: 3px; }
width: 250px;
box-sizing: border-box; .propertyName {
background-color: black; font-style: italic;
flex-shrink: 0;
}
.propertyDivider {
padding: 0 6px;
flex-shrink: 0;
}
.propertyValue {
word-break: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
</style> </style>

View file

@ -4,8 +4,8 @@
<style> <style>
.section { .section {
line-height: 22px; line-height: 20px;
margin-bottom: 16px; margin-bottom: 13px;
overflow: hidden; overflow: hidden;
} }
</style> </style>

View file

@ -1,4 +1,5 @@
export { default as Subject } from "./Subject.svelte" export { default as Subject } from "./Subject.svelte"
export { default as Property } from "./Property.svelte" export { default as Property } from "./Property.svelte"
export { default as JSONProperty } from "./JSONProperty.svelte"
export { default as Section } from "./Section.svelte" export { default as Section } from "./Section.svelte"
export { default as Block } from "./Block.svelte" export { default as Block } from "./Block.svelte"

View file

@ -38,7 +38,6 @@
<Line noWrap> <Line noWrap>
<InfoWord <InfoWord
on:mouseenter={() => setExplanationSubject(subjects.column)} on:mouseenter={() => setExplanationSubject(subjects.column)}
on:mouseleave={() => setExplanationSubject(subjects.none)}
href={tableHref} href={tableHref}
text={columnName} text={columnName}
/> />