2021-02-16 07:41:56 +13:00
|
|
|
<script>
|
2021-04-23 21:55:27 +12:00
|
|
|
import { Icon, Button, Input } from "@budibase/bbui"
|
2021-02-16 07:41:56 +13:00
|
|
|
|
2021-02-25 05:31:47 +13:00
|
|
|
export let defaults
|
|
|
|
export let object = defaults || {}
|
2021-02-20 01:07:37 +13:00
|
|
|
export let readOnly
|
2021-09-30 01:02:30 +13:00
|
|
|
export let noAddButton
|
2021-02-16 07:41:56 +13:00
|
|
|
|
2021-02-19 05:58:10 +13:00
|
|
|
let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
|
2021-02-16 07:41:56 +13:00
|
|
|
|
|
|
|
$: object = fields.reduce(
|
|
|
|
(acc, next) => ({ ...acc, [next.name]: next.value }),
|
|
|
|
{}
|
|
|
|
)
|
|
|
|
|
2021-09-30 01:02:30 +13:00
|
|
|
export function addEntry() {
|
2021-02-16 07:41:56 +13:00
|
|
|
fields = [...fields, {}]
|
|
|
|
}
|
|
|
|
|
|
|
|
function deleteEntry(idx) {
|
|
|
|
fields.splice(idx, 1)
|
|
|
|
fields = fields
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
|
2021-02-20 01:07:37 +13:00
|
|
|
<div class="container" class:readOnly>
|
2021-02-16 07:41:56 +13:00
|
|
|
{#each fields as field, idx}
|
2021-04-20 22:53:19 +12:00
|
|
|
<Input placeholder="Key" bind:value={field.name} />
|
|
|
|
<Input placeholder="Value" bind:value={field.value} />
|
2021-02-20 01:07:37 +13:00
|
|
|
{#if !readOnly}
|
2021-04-23 21:55:27 +12:00
|
|
|
<Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
|
2021-02-20 01:07:37 +13:00
|
|
|
{/if}
|
2021-02-16 07:41:56 +13:00
|
|
|
{/each}
|
|
|
|
</div>
|
2021-09-30 01:02:30 +13:00
|
|
|
{#if !readOnly && !noAddButton}
|
2021-05-04 20:55:14 +12:00
|
|
|
<div>
|
|
|
|
<Button secondary thin outline on:click={addEntry}>Add</Button>
|
|
|
|
</div>
|
2021-02-20 01:07:37 +13:00
|
|
|
{/if}
|
2021-02-16 07:41:56 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.container {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr 1fr 20px;
|
|
|
|
grid-gap: var(--spacing-m);
|
|
|
|
align-items: center;
|
2021-02-16 07:59:21 +13:00
|
|
|
margin-bottom: var(--spacing-m);
|
2021-02-16 07:41:56 +13:00
|
|
|
}
|
|
|
|
</style>
|