MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

example section

This commit is contained in:
Gerard Burns 2024-04-17 07:54:53 +01:00
parent 7b52811f10
commit feef3450b7
9 changed files with 104 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { onMount } from "svelte" import { onMount } from "svelte"
import { Block, Subject, Section } from './components' import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
let timestamp = Date.now(); let timestamp = Date.now();
@ -28,13 +28,23 @@
A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number. A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
</Section> </Section>
<Section> <ExampleSection
Examples: heading="Examples:"
<br /> >
1st Jan 2000: <Block>946684800000</Block> <ExampleLine>
<br /> 1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
1st Jan 2020: <Block>1577836800000</Block> </ExampleLine>
<br /> <ExampleLine>
Now: <Block>{timestamp}</Block> 1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
</Section> </ExampleLine>
<ExampleLine>
Now<span class="separator">:</span> <Block>{timestamp}</Block>
</ExampleLine>
</ExampleSection>
</Subject> </Subject>
<style>
.separator {
margin-right: 5px;
}
</style>

20
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { Body } from "@budibase/bbui" import { Body } from "@budibase/bbui"
import { Block, Subject, Section } from './components' import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
export let schema export let schema
export let columnName export let columnName
@ -38,25 +38,19 @@
</Section> </Section>
{#if scalarDescendants.length > 0} {#if scalarDescendants.length > 0}
<Section> <ExampleSection
Examples scalar descendants of this object: heading="Examples scalar descendants of this object:"
<br /> >
{#each scalarDescendants as descendant} {#each scalarDescendants as descendant}
<div class="example"> <ExampleLine>
<Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block> <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
</div> </ExampleLine>
{/each} {/each}
</Section> </ExampleSection>
{/if} {/if}
</Subject> </Subject>
<style> <style>
.example {
display: flex;
margin-bottom: 2px;
}
.separator { .separator {
margin: 0 4px; margin: 0 4px;
flex-shrink: 0; flex-shrink: 0;

46
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { Block, Subject, Section } from './components' import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
</script> </script>
<Subject heading="Text as Numbers"> <Subject heading="Text as Numbers">
@ -7,19 +7,33 @@
Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior. Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior.
</Section> </Section>
<Section> <ExampleSection
Examples: heading="Examples:"
<br /> >
<Block>"100"</Block>{" -> "}<Block>100</Block> <ExampleLine>
<br /> <Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block>
<Block>"100k"</Block>{" -> "}<Block>100</Block> </ExampleLine>
<br /> <ExampleLine>
<Block>"100,000"</Block>{" -> "}<Block>100</Block> <Block>"100k"</Block><span class="separator">{"->"}</span><Block>100</Block>
<br /> </ExampleLine>
<Block>"100 million"</Block>{" -> "}<Block>100</Block> <ExampleLine>
<br /> <Block>"100,000"</Block><span class="separator">{"->"}</span><Block>100</Block>
<Block>"100.9"</Block>{" -> "}<Block>100.9</Block> </ExampleLine>
<br /> <ExampleLine>
<Block>"One hundred"</Block>{" -> "}<Block>Error</Block> <Block>"100 million"</Block><span class="separator">{"->"}</span><Block>100</Block>
</Section> </ExampleLine>
<ExampleLine>
<Block>"100.9"</Block><span class="separator">{"->"}</span><Block>100.9</Block>
</ExampleLine>
<ExampleLine>
<Block>"One hundred"</Block><span class="separator">{"->"}</span><Block>Error</Block>
</ExampleLine>
</ExampleSection>
</Subject> </Subject>
<style>
.separator {
margin: 0 4px;
flex-shrink: 0;
}
</style>

1
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
View File

@ -2,6 +2,7 @@
export let truncate = false export let truncate = false
export let noShrink = false export let noShrink = false
</script> </script>
<span class:truncate class:noShrink class="block"> <span class:truncate class:noShrink class="block">
<slot /> <slot />
</span> </span>

12
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte Normal file
View File

@ -0,0 +1,12 @@
<li>
<div class="exampleLine">
<slot />
</div>
</li>
<style>
.exampleLine {
display: flex;
margin-bottom: 2px;
}
</style>

31
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte Normal file
View File

@ -0,0 +1,31 @@
<script>
import Section from "./Section.svelte"
export let heading
</script>
<Section>
<span class="exampleSectionHeading">
<slot name="heading">
{heading}
</slot>
</span>
<ul>
<slot />
</ul>
</Section>
<style>
.exampleSectionHeading {
display: inline-block;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
ul {
padding: 0 0 0 23px;
margin: 0;
}
</style>

4
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
View File

@ -8,8 +8,4 @@
margin-bottom: 13px; margin-bottom: 13px;
overflow: hidden; overflow: hidden;
} }
.section :global(ul) {
padding-left: 24px;
}
</style> </style>

2
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
View File

@ -4,3 +4,5 @@ export { default as JSONValue } from "./JSONValue.svelte"
export { default as BindingValue } from "./BindingValue.svelte" export { default as BindingValue } from "./BindingValue.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"
export { default as ExampleSection } from "./ExampleSection.svelte"
export { default as ExampleLine } from "./ExampleLine.svelte"

1
packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
View File

@ -9,6 +9,7 @@
<Line> <Line>
<InfoWord <InfoWord
on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)} on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
on:mouseleave={() => setExplanationSubject(subjects.none)}
>Scalar JSON values</InfoWord> >Scalar JSON values</InfoWord>
<Text <Text
value=" can be used with this component if their individual types are supported" value=" can be used with this component if their individual types are supported"