Improve data binding popup and finish component bindings
This commit is contained in:
Andrew Kingston
parent
f228d3b174
commit
0a669033d1
|
|
@ -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}`,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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 context}
|
||||
<Heading extraSmall>Tables</Heading>
|
||||
<ul>
|
||||
{#each context as { readableBinding }}
|
||||
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{#if instance}
|
||||
<Heading extraSmall>Components</Heading>
|
||||
<ul>
|
||||
{#each instance as { readableBinding }}
|
||||
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if hasBindableProperties}
|
||||
{#if context}
|
||||
<Heading extraSmall>Contexts</Heading>
|
||||
<Spacer small />
|
||||
<ul>
|
||||
{#each context as { readableBinding }}
|
||||
<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>
|
||||
{/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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue