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

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

@ -21,21 +21,6 @@
"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": {
"name": "Rich 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"
}
]
},
"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 datepicker } from "./DatePicker.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 login } from "./Login.svelte"
// export { default as link } from "./Link.svelte"
// export { default as image } from "./Image.svelte"
// export { default as navigation } from "./Navigation.svelte"