1
0
Fork 0
mirror of synced 2024-09-18 10:20:11 +12:00
budibase/packages/builder/src/components/integration/QueryParameterBuilder.svelte

53 lines
1.3 KiB
Svelte
Raw Normal View History

<script>
import { TextArea, Label, Input, Heading } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte"
import BindableInput from "components/userInterface/BindableInput.svelte"
export let parameters = []
export let bindings = []
export let customParams = {}
function newQueryParameter() {
parameters = [...parameters, {}]
}
function deleteQueryParameter(idx) {
parameters.splice(idx, 1)
parameters = parameters
}
</script>
<Heading extraSmall black>Parameters</Heading>
<div class="parameters">
<Label extraSmall grey>Parameter Name</Label>
<Label extraSmall grey>Default</Label>
<Label extraSmall grey>Value</Label>
<div />
{#each parameters as parameter, idx}
<Input thin bind:value={parameter.name} />
<Input thin bind:value={parameter.default} />
<BindableInput
type="string"
thin
bind:value={customParams[parameter.name]}
{bindings} />
<i
class="ri-close-circle-line delete"
on:click={() => deleteQueryParameter(idx)} />
{/each}
</div>
<i class="ri-add-circle-line add" on:click={newQueryParameter} />
<style>
.parameters {
display: grid;
grid-template-columns: 1fr 1fr 1fr 5%;
grid-gap: 10px;
align-items: center;
}
.add {
margin-top: var(--spacing-m);
}
</style>