groups components and table in separate categories

This commit is contained in:
kevmodrome 2020-08-31 10:12:06 +02:00
parent 5c24dc4592
commit c786d4edae
No known key found for this signature in database
GPG Key ID: E8F9CD141E63BF38
2 changed files with 25 additions and 11 deletions

View File

@ -1,4 +1,5 @@
<script> <script>
import groupBy from "lodash/fp/groupBy"
import { Button, TextArea, Label, Body } from "@budibase/bbui" import { Button, TextArea, Label, Body } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
@ -18,18 +19,30 @@
function cancel() { function cancel() {
dispatch("update", originalValue) dispatch("update", originalValue)
close() close()
console.log("test")
} }
$: ({ instance, context } = groupBy("type", bindableProperties))
</script> </script>
<div class="container"> <div class="container">
<div class="list"> <div class="list">
<Label size="l" color="dark">Objects</Label> <Label size="l" color="dark">Objects</Label>
<ul> {#if context}
{#each bindableProperties as { readableBinding }} <Label size="s" color="dark">Table</Label>
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> <ul>
{/each} {#each context as { readableBinding }}
</ul> <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
{/each}
</ul>
{/if}
{#if instance}
<Label size="s" color="dark">Components</Label>
<ul>
{#each instance as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
{/each}
</ul>
{/if}
</div> </div>
<div class="text"> <div class="text">
<Label size="l" color="dark">Data binding</Label> <Label size="l" color="dark">Data binding</Label>
@ -40,7 +53,7 @@
<TextArea bind:value placeholder="" /> <TextArea bind:value placeholder="" />
<div class="controls"> <div class="controls">
<a href="#"> <a href="#">
<Label size="s" color="light">Learn more about binding</Label> <Body size="s" color="light">Learn more about binding</Body>
</a> </a>
<Button on:click={cancel} secondary>Cancel</Button> <Button on:click={cancel} secondary>Cancel</Button>
<Button on:click={close} primary>Done</Button> <Button on:click={close} primary>Done</Button>
@ -60,6 +73,7 @@
.controls { .controls {
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
display: grid; display: grid;
align-items: center;
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }

View File

@ -688,10 +688,10 @@
lodash "^4.17.13" lodash "^4.17.13"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@budibase/bbui@^1.29.0": "@budibase/bbui@^1.29.1":
version "1.29.0" version "1.29.1"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.0.tgz#f10815d6c8cb6125e2688960cd71640e2ce53c9b" resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
integrity sha512-pRnYxkymKE4DNWPJoutygIiUQFZ+sWSmL1aTVa//O6+GemieEwukT9JbMQ7+RdTHnWANJd0OxPGwAYvNEETOaw== integrity sha512-t8zxP7IIHQ4CMT+CRZWUvMgD6NC01J/dwH+pBerR8lJPSygmCOmrDy3ySfSmqcIhzjCbPIVtk32UKnXFqHtzRQ==
dependencies: dependencies:
sirv-cli "^0.4.6" sirv-cli "^0.4.6"