68 lines
1.8 KiB
Svelte
68 lines
1.8 KiB
Svelte
|
<script>
|
||
|
|
import "@spectrum-css/textfield/dist/index-vars.css"
|
||
|
|
import { Label } from "@budibase/bbui"
|
||
|
|
import { getContext } from "svelte"
|
||
|
|
|
||
|
|
export let field
|
||
|
|
export let label
|
||
|
|
export let placeholder
|
||
|
|
export let validate = value => (value ? null : "Required")
|
||
|
|
|
||
|
|
const { styleable } = getContext("sdk")
|
||
|
|
const component = getContext("component")
|
||
|
|
const { formApi } = getContext("form") ?? {}
|
||
|
|
|
||
|
|
// Register this field with its form
|
||
|
|
const formField = formApi?.registerField(field, validate) ?? {}
|
||
|
|
const { fieldApi, fieldState } = formField
|
||
|
|
|
||
|
|
// Update value on blur only
|
||
|
|
const onBlur = event => {
|
||
|
|
fieldApi.setValue(event.target.value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if !field}
|
||
|
|
<div>Add the Field setting to start using your component!</div>
|
||
|
|
{:else if !fieldState}
|
||
|
|
<div>Form components need to be wrapped in a Form.</div>
|
||
|
|
{:else}
|
||
|
|
<div class="container" use:styleable={$component.styles}>
|
||
|
|
{#if label}
|
||
|
|
<Label grey>{label}</Label>
|
||
|
|
{/if}
|
||
|
|
<div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
|
||
|
|
{#if !$fieldState.valid}
|
||
|
|
<svg
|
||
|
|
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
|
||
|
|
focusable="false"
|
||
|
|
aria-hidden="true">
|
||
|
|
<use xlink:href="#spectrum-icon-18-Alert" />
|
||
|
|
</svg>
|
||
|
|
{/if}
|
||
|
|
<input
|
||
|
|
value={$fieldState.value || ''}
|
||
|
|
placeholder={placeholder || ''}
|
||
|
|
on:blur={onBlur}
|
||
|
|
type="text"
|
||
|
|
class="spectrum-Textfield-input" />
|
||
|
|
</div>
|
||
|
|
{#if $fieldState.error}
|
||
|
|
<div class="error">
|
||
|
|
<Label>{$fieldState.error}</Label>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.error :global(label) {
|
||
|
|
color: var(
|
||
|
|
--spectrum-semantic-negative-color-default,
|
||
|
|
var(--spectrum-global-color-red-500)
|
||
|
|
) !important;
|
||
|
|
margin-top: var(--spacing-s) !important;
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
</style>
|