62 lines
1.3 KiB
Svelte
62 lines
1.3 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from "svelte"
|
|
import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
|
|
import { Input, Icon } from "@budibase/bbui"
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
export let bindings = []
|
|
export let value
|
|
|
|
let anchor
|
|
let popover = undefined
|
|
let enrichedValue
|
|
let inputProps
|
|
|
|
// Extract all other props to pass to input component
|
|
$: {
|
|
let { bindings, ...otherProps } = $$props
|
|
inputProps = otherProps
|
|
}
|
|
$: value && dispatch("change", value)
|
|
</script>
|
|
|
|
<div class="container" bind:this={anchor}>
|
|
<Input {...inputProps} bind:value />
|
|
<div class="icon" on:click={popover.show}>
|
|
<Icon name="edit" />
|
|
</div>
|
|
</div>
|
|
<GenericBindingPopover
|
|
{anchor}
|
|
{bindings}
|
|
bind:value
|
|
bind:popover
|
|
align="right" />
|
|
|
|
<style>
|
|
.container {
|
|
position: relative;
|
|
}
|
|
|
|
.icon {
|
|
right: 2px;
|
|
top: 26px;
|
|
bottom: 2px;
|
|
position: absolute;
|
|
align-items: center;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding-left: var(--spacing-xs);
|
|
border-left: 1px solid var(--grey-4);
|
|
background-color: var(--grey-2);
|
|
border-top-right-radius: var(--border-radius-m);
|
|
border-bottom-right-radius: var(--border-radius-m);
|
|
color: var(--grey-7);
|
|
font-size: 16px;
|
|
}
|
|
.icon:hover {
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
}
|
|
</style>
|