2020-03-28 00:28:30 +13:00
|
|
|
<script>
|
2020-12-05 03:46:21 +13:00
|
|
|
import {
|
|
|
|
Input,
|
|
|
|
Select,
|
|
|
|
Label,
|
|
|
|
DatePicker,
|
|
|
|
Toggle,
|
|
|
|
RichText,
|
|
|
|
} from "@budibase/bbui"
|
2020-09-12 02:09:56 +12:00
|
|
|
import Dropzone from "components/common/Dropzone.svelte"
|
2020-10-03 00:00:17 +13:00
|
|
|
import { capitalise } from "../../../helpers"
|
2020-10-10 07:10:28 +13:00
|
|
|
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
2020-08-08 03:13:57 +12:00
|
|
|
|
2020-08-22 04:05:26 +12:00
|
|
|
export let meta
|
2020-08-25 02:48:34 +12:00
|
|
|
export let value = meta.type === "boolean" ? false : ""
|
2020-12-08 08:05:39 +13:00
|
|
|
export let readonly
|
2020-08-22 04:05:26 +12:00
|
|
|
|
2020-10-07 04:02:48 +13:00
|
|
|
$: type = meta.type
|
|
|
|
$: label = capitalise(meta.name)
|
2020-03-28 00:28:30 +13:00
|
|
|
</script>
|
|
|
|
|
2020-10-07 04:02:48 +13:00
|
|
|
{#if type === 'options'}
|
2020-09-30 06:27:35 +13:00
|
|
|
<Select thin secondary {label} data-cy="{meta.name}-select" bind:value>
|
2020-09-25 22:35:32 +12:00
|
|
|
<option value="">Choose an option</option>
|
2020-08-25 02:48:34 +12:00
|
|
|
{#each meta.constraints.inclusion as opt}
|
2020-06-01 23:15:44 +12:00
|
|
|
<option value={opt}>{opt}</option>
|
|
|
|
{/each}
|
2020-08-08 03:13:57 +12:00
|
|
|
</Select>
|
2020-10-07 04:02:48 +13:00
|
|
|
{:else if type === 'datetime'}
|
2020-09-30 06:27:35 +13:00
|
|
|
<DatePicker {label} bind:value />
|
2020-10-07 04:02:48 +13:00
|
|
|
{:else if type === 'attachment'}
|
2020-09-30 01:54:04 +13:00
|
|
|
<div>
|
2020-09-30 06:27:35 +13:00
|
|
|
<Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
|
2020-09-30 01:54:04 +13:00
|
|
|
<Dropzone bind:files={value} />
|
2020-09-25 22:35:32 +12:00
|
|
|
</div>
|
2020-10-07 04:02:48 +13:00
|
|
|
{:else if type === 'boolean'}
|
2020-09-30 06:27:35 +13:00
|
|
|
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
|
2020-10-07 04:02:48 +13:00
|
|
|
{:else if type === 'link'}
|
2021-02-10 03:37:42 +13:00
|
|
|
<div>
|
|
|
|
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
|
|
|
|
</div>
|
2020-12-04 03:37:04 +13:00
|
|
|
{:else if type === 'longform'}
|
|
|
|
<div>
|
|
|
|
<Label extraSmall grey>{label}</Label>
|
|
|
|
<RichText bind:value />
|
|
|
|
</div>
|
2020-05-29 09:26:32 +12:00
|
|
|
{:else}
|
2020-11-28 03:59:27 +13:00
|
|
|
<Input
|
|
|
|
thin
|
|
|
|
{label}
|
|
|
|
data-cy="{meta.name}-input"
|
|
|
|
{type}
|
|
|
|
bind:value
|
2020-12-08 08:05:39 +13:00
|
|
|
disabled={readonly} />
|
2020-08-11 22:23:07 +12:00
|
|
|
{/if}
|