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

Improve data binding popup and finish component bindings

This commit is contained in:
Andrew Kingston 2021-01-15 10:59:22 +00:00
parent 26067ed026
commit ec4a4047b6
6 changed files with 73 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/builder/src/builderStore/dataBinding.js
View File

@ -71,9 +71,14 @@ export const getBindableComponents = rootComponent => {
return definition.bindable return definition.bindable
} }
const components = findAllMatchingComponents(rootComponent, componentSelector) const components = findAllMatchingComponents(rootComponent, componentSelector)
console.log(components) return components.map(component => {
return {
return [] type: "instance",
providerId: component._id,
runtimeBinding: `${component._id}`,
readableBinding: `${component._instanceName}`,
}
})
} }
/** /**

43
packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte
View File

@ -21,42 +21,51 @@
} }
$: ({ instance, context } = groupBy("type", bindableProperties)) $: ({ instance, context } = groupBy("type", bindableProperties))
$: hasBindableProperties = !!bindableProperties?.length
</script> </script>
<div class="container" data-cy="binding-dropdown-modal"> <div class="container" data-cy="binding-dropdown-modal">
<div class="list"> <div class="list">
<Heading extraSmall>Objects</Heading> {#if hasBindableProperties}
<Spacer medium />
{#if context} {#if context}
<Heading extraSmall>Tables</Heading> <Heading extraSmall>Contexts</Heading>
<Spacer small />
<ul> <ul>
{#each context as { readableBinding }} {#each context as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> <li on:click={() => addToText(readableBinding)}>
{readableBinding}
</li>
{/each} {/each}
</ul> </ul>
{/if} {/if}
{#if instance} {#if instance}
<Spacer medium />
<Heading extraSmall>Components</Heading> <Heading extraSmall>Components</Heading>
<Spacer small />
<ul> <ul>
{#each instance as { readableBinding }} {#each instance as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> <li on:click={() => addToText(readableBinding)}>
{readableBinding}
</li>
{/each} {/each}
</ul> </ul>
{/if} {/if}
{:else}
<div class="empty">There aren't any bindable properties available.</div>
{/if}
</div> </div>
<div class="text"> <div class="text">
<Heading extraSmall>Data binding</Heading> <Heading extraSmall>Data Binding</Heading>
<Spacer small /> <Spacer small />
<Body extraSmall lh> <Body extraSmall lh>
Binding connects one piece of data to another and makes it dynamic. Click Binding connects one piece of data to another and makes it dynamic. Click
the objects on the left, to add them to the textbox. the objects on the left to add them to the extbox.
</Body> </Body>
<Spacer large /> <Spacer large />
<TextArea <TextArea
thin thin
bind:value bind:value
placeholder="Add text, or click the objects on the left to add them to the placeholder="Add text, or click the objects on the left to add them to the textbox." />
textbox." />
<div class="controls"> <div class="controls">
<a href="https://docs.budibase.com/design/binding"> <a href="https://docs.budibase.com/design/binding">
<Body small grey>Learn more about binding</Body> <Body small grey>Learn more about binding</Body>
@ -84,9 +93,11 @@
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }
.list { .list {
width: 150px; width: 200px;
border-right: 1.5px solid var(--grey-4); border-right: 1.5px solid var(--grey-4);
padding: var(--spacing-xl); padding: var(--spacing-xl);
max-height: 300px;
overflow: auto;
} }
.text { .text {
width: 600px; width: 600px;
@ -96,9 +107,11 @@
.text :global(p) { .text :global(p) {
margin: 0; margin: 0;
} }
.text :global(textarea) {
min-height: 50px;
}
ul { ul {
list-style: none; list-style: none;
padding-left: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -108,7 +121,7 @@
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
color: var(--grey-7); color: var(--grey-7);
padding: var(--spacing-s) 0; padding: var(--spacing-xs) 0;
margin: auto 0px; margin: auto 0px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -116,10 +129,14 @@
li:hover { li:hover {
color: var(--ink); color: var(--ink);
font-weight: 500;
} }
li:active { li:active {
color: var(--blue); color: var(--blue);
} }
div.empty {
font-size: var(--font-size-xs);
color: var(--grey-5);
}
</style> </style>

34
packages/builder/src/components/design/temporaryPanelStructure.js
View File

@ -850,40 +850,6 @@ export default {
settings: [{ label: "Logo URL", key: "logoUrl", control: Input }], settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
}, },
}, },
{
name: "Login",
_component: "@budibase/standard-components/login",
description:
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-line",
children: [],
showOnAsset: ["login-screen"],
properties: {
design: { ...all },
settings: [
{
label: "Name",
key: "name",
control: Input,
},
{
label: "Logo",
key: "logo",
control: Input,
},
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Button Text",
key: "buttonText",
control: Input,
},
],
},
},
{ {
name: "Row Detail", name: "Row Detail",
_component: "@budibase/standard-components/rowdetail", _component: "@budibase/standard-components/rowdetail",

15
packages/standard-components/components.json
View File

@ -21,21 +21,6 @@
"logoUrl": "string" "logoUrl": "string"
} }
}, },
"login": {
"name": "Login Control",
"description": "A control that accepts email, password an also handles password resets",
"props": {
"logo": "string",
"title": "string",
"buttonText": "string"
},
"tags": [
"login",
"credentials",
"password",
"logon"
]
},
"richtext": { "richtext": {
"name": "Rich Text", "name": "Rich Text",
"description": "A component that allows the user to enter long form text.", "description": "A component that allows the user to enter long form text.",

22
packages/standard-components/manifest.json
View File

@ -269,5 +269,27 @@
"key": "text" "key": "text"
} }
] ]
},
"login": {
"description": "A component that automatically generates a login screen for your app.",
"icon": "ri-login-box-line",
"styleable": true,
"settings": [
{
"type": "text",
"label": "Logo",
"key": "logo"
},
{
"type": "text",
"label": "Title",
"key": "title"
},
{
"type": "text",
"label": "Button Text",
"key": "buttonText"
}
]
} }
} }

2
packages/standard-components/src/index.js
View File

@ -17,9 +17,9 @@ export { default as card } from "./Card.svelte"
export { default as form } from "./DataFormWide.svelte" export { default as form } from "./DataFormWide.svelte"
export { default as datepicker } from "./DatePicker.svelte" export { default as datepicker } from "./DatePicker.svelte"
export { default as text } from "./Text.svelte" export { default as text } from "./Text.svelte"
export { default as login } from "./Login.svelte"
// export { default as heading } from "./Heading.svelte" // export { default as heading } from "./Heading.svelte"
// export { default as login } from "./Login.svelte"
// export { default as link } from "./Link.svelte" // export { default as link } from "./Link.svelte"
// export { default as image } from "./Image.svelte" // export { default as image } from "./Image.svelte"
// export { default as navigation } from "./Navigation.svelte" // export { default as navigation } from "./Navigation.svelte"