67 lines
1.5 KiB
Svelte
67 lines
1.5 KiB
Svelte
<script>
|
|
import {
|
|
Input,
|
|
Select,
|
|
ColorPicker,
|
|
DrawerContent,
|
|
Layout,
|
|
Label,
|
|
} from "@budibase/bbui"
|
|
import { store } from "builderStore"
|
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
|
|
|
export let column
|
|
</script>
|
|
|
|
<DrawerContent>
|
|
<div class="container">
|
|
<Layout noPadding gap="S">
|
|
<Input bind:value={column.width} label="Width" placeholder="Auto" />
|
|
<Select
|
|
label="Alignment"
|
|
bind:value={column.align}
|
|
options={["Left", "Center", "Right"]}
|
|
placeholder="Default"
|
|
/>
|
|
<DrawerBindableInput
|
|
label="Value"
|
|
value={column.template}
|
|
on:change={e => (column.template = e.detail)}
|
|
placeholder={`{{ Value }}`}
|
|
bindings={[
|
|
{
|
|
readableBinding: "Value",
|
|
runtimeBinding: "[value]",
|
|
},
|
|
]}
|
|
/>
|
|
<Layout noPadding gap="XS">
|
|
<Label>Background color</Label>
|
|
<ColorPicker
|
|
value={column.background}
|
|
on:change={e => (column.background = e.detail)}
|
|
alignRight
|
|
spectrumTheme={$store.theme}
|
|
/>
|
|
</Layout>
|
|
<Layout noPadding gap="XS">
|
|
<Label>Text color</Label>
|
|
<ColorPicker
|
|
value={column.color}
|
|
on:change={e => (column.color = e.detail)}
|
|
alignRight
|
|
spectrumTheme={$store.theme}
|
|
/>
|
|
</Layout>
|
|
</Layout>
|
|
</div>
|
|
</DrawerContent>
|
|
|
|
<style>
|
|
.container {
|
|
width: 100%;
|
|
max-width: 240px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|