wip
This commit is contained in:
Gerard Burns
parent
d506e0724e
commit
18581ba982
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import { ContextTooltip } from "@budibase/bbui"
|
||||
import { Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
|
||||
import { ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
|
||||
import subjects from '../subjects'
|
||||
|
||||
export let anchor
|
||||
export let schema
|
||||
export let columnName
|
||||
export let subject = subjects.none
|
||||
</script>
|
||||
|
||||
|
|
@ -26,6 +27,8 @@
|
|||
<NotRequired />
|
||||
{:else if subject === subjects.datesAsNumbers}
|
||||
<DatesAsNumbers />
|
||||
{:else if subject === subjects.scalarJsonOnly}
|
||||
<ScalarJsonOnly {columnName} {schema} />
|
||||
{/if}
|
||||
</div>
|
||||
</ContextTooltip>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
|
||||
<Subject heading="Dates as Numbers">
|
||||
<Section>
|
||||
A Date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
|
||||
A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
|
||||
</Section>
|
||||
</Subject>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<script>
|
||||
import { Body } from "@budibase/bbui"
|
||||
import { Block, Subject, Section } from './components'
|
||||
|
||||
export let schema
|
||||
export let columnName
|
||||
|
||||
const maxScalarDescendantsToFind = 3;
|
||||
|
||||
const getScalarDescendants = (schema) => {
|
||||
const newScalarDescendants = [];
|
||||
|
||||
const getScalarDescendantFromSchema = (path, schema) => {
|
||||
if (newScalarDescendants.length >= maxScalarDescendantsToFind) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (["string", "number", "boolean"].includes(schema.type)) {
|
||||
newScalarDescendants.push(path.join("."))
|
||||
} else if (schema.type === "json") {
|
||||
Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) =>
|
||||
getScalarDescendantFromSchema([...path, childName], childSchema))
|
||||
}
|
||||
}
|
||||
|
||||
Object.entries(schema?.schema ?? {}).forEach(([childName, childSchema]) =>
|
||||
getScalarDescendantFromSchema([columnName, childName], childSchema))
|
||||
|
||||
return newScalarDescendants;
|
||||
}
|
||||
|
||||
$: scalarDescendants = getScalarDescendants(schema)
|
||||
$: console.log(scalarDescendants);
|
||||
$: console.log(schema);
|
||||
</script>
|
||||
|
||||
<Subject heading="Using Scalar JSON Values">
|
||||
<Section>
|
||||
<Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the component. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
|
||||
</Section>
|
||||
|
||||
{#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}
|
||||
</Section>
|
||||
{/if}
|
||||
</Subject>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let truncate = false
|
||||
</script>
|
||||
|
||||
<span class:truncate class="block">
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.block {
|
||||
font-style: italic;
|
||||
padding: 0px 3px;
|
||||
border-radius: 1px;
|
||||
background-color: var(--grey-3);
|
||||
color: var(--ink);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
<style>
|
||||
.section {
|
||||
line-height: 22px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export { default as Subject } from "./Subject.svelte"
|
||||
export { default as Property } from "./Property.svelte"
|
||||
export { default as Section } from "./Section.svelte"
|
||||
export { default as Block } from "./Block.svelte"
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@ export { default as NotRequired } from "./NotRequired.svelte"
|
|||
export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
|
||||
export { default as Support } from "./Support.svelte"
|
||||
export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
|
||||
export { default as ScalarJsonOnly } from "./ScalarJsonOnly.svelte"
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@
|
|||
|
||||
{#if explanationModal}
|
||||
<ExplanationModal
|
||||
{columnName}
|
||||
anchor={root}
|
||||
{schema}
|
||||
subject={explanationModalSubject}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,12 @@
|
|||
|
||||
|
||||
<Line>
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
|
||||
on:mouseleave={() => setExplanationSubject(subjects.none)}
|
||||
>Scalar JSON values</InfoWord>
|
||||
<Text
|
||||
value="JSON Objects cannot be used, but scalar"
|
||||
/>
|
||||
<Text
|
||||
value=" child values can be if their individual types are supported"
|
||||
value=" can be used with this component if their individual types are supported"
|
||||
/>
|
||||
<Period />
|
||||
</Line>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
</script>
|
||||
|
||||
<Line>
|
||||
<Text value="Any " />
|
||||
<Text value="The component will ignore any " />
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
|
||||
on:mouseleave={() => setExplanationSubject(subjects.none)}
|
||||
text="non-number values"
|
||||
/>
|
||||
<Text value=" will be ignored." />
|
||||
<Period />
|
||||
</Line>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ const subjects = {
|
|||
stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
|
||||
datesAsNumbers: Symbol("explanation-modal-dates-as-numbers"),
|
||||
notRequired: Symbol("explanation-modal-not-required"),
|
||||
scalarJsonOnly: Symbol("explanation-scalar-json-only"),
|
||||
none: Symbol("explanation-modal-none")
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
color: var(--grey-6);
|
||||
font-size: 17px;
|
||||
display: inline block;
|
||||
line-height: 26px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,7 @@
|
|||
.link {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 0 2px;
|
||||
vertical-align: sub;
|
||||
padding: 1px 0;
|
||||
filter: brightness(100%);
|
||||
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -51,17 +51,14 @@
|
|||
|
||||
<style>
|
||||
.infoWord {
|
||||
vertical-align: bottom;
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 6px;
|
||||
border-radius: 5px;
|
||||
padding: 1px 0;
|
||||
filter: brightness(100%);
|
||||
background-color: var(--grey-3);
|
||||
border: 1px solid var(--grey-3);
|
||||
overflow: hidden;
|
||||
transition: filter 300ms;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--grey-6);
|
||||
}
|
||||
|
||||
.infoWord:hover {
|
||||
|
|
|
|||
|
|
@ -23,14 +23,15 @@
|
|||
font-size: 17px;
|
||||
display: inline block;
|
||||
margin-right: 10px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: 17px;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 6px;
|
||||
}
|
||||
|
||||
.noWrap {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
color: var(--grey-6);
|
||||
font-size: 20px;
|
||||
display: inline block;
|
||||
line-height: 26px;
|
||||
margin-left: 2px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<style>
|
||||
.space {
|
||||
white-space: pre;
|
||||
line-height: 26px;
|
||||
width: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,37 +40,25 @@
|
|||
$: words = getWords(value)
|
||||
</script>
|
||||
|
||||
{#if words.length}
|
||||
{#each words as word}
|
||||
{#if word === " "}
|
||||
<Space />
|
||||
{:else if word === ","}
|
||||
<Comma />
|
||||
{:else if word === "."}
|
||||
<Period />
|
||||
{:else}
|
||||
<span class="text">
|
||||
{word}
|
||||
</span>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<span class="text"><slot /></span>
|
||||
{/if}
|
||||
{#each words as word}
|
||||
{#if word === " "}
|
||||
<Space />
|
||||
{:else if word === ","}
|
||||
<Comma />
|
||||
{:else if word === "."}
|
||||
<Period />
|
||||
{:else}
|
||||
<span class="text">
|
||||
{word}
|
||||
</span>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.text {
|
||||
flex-shrink: 0;
|
||||
line-height: 26px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.space {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.punctuation {
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
/* invisible properties to match other inline text elements that do have borders. If we don't match here we run into subpixel issues */
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 1px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue