forked from tsai/budibase
Andrew Kingston
6 years ago
9 changed files with 311 additions and 91 deletions
@ -1 +1,107 @@ |
|||
Select |
|||
<script> |
|||
import "@spectrum-css/picker/dist/index-vars.css" |
|||
import "@spectrum-css/popover/dist/index-vars.css" |
|||
import "@spectrum-css/menu/dist/index-vars.css" |
|||
import { getContext } from "svelte" |
|||
import SpectrumField from "./SpectrumField.svelte" |
|||
|
|||
export let field |
|||
export let label |
|||
export let placeholder |
|||
|
|||
// Register this field with its form |
|||
const { formApi } = getContext("form") ?? {} |
|||
const formField = formApi?.registerField(field) ?? {} |
|||
const { fieldApi, fieldState, fieldSchema } = formField |
|||
|
|||
// Picker state |
|||
let open = false |
|||
$: options = fieldSchema?.constraints?.inclusion ?? [] |
|||
$: placeholderText = placeholder || "Choose an option" |
|||
$: isNull = $fieldState.value == null || $fieldState.value === "" |
|||
|
|||
// Update value on blur only |
|||
const selectOption = value => { |
|||
fieldApi.setValue(value) |
|||
open = false |
|||
} |
|||
</script> |
|||
|
|||
<SpectrumField {field} {label}> |
|||
<button |
|||
id={$fieldState.fieldId} |
|||
class="spectrum-Picker" |
|||
class:is-invalid={!$fieldState.valid} |
|||
class:is-open={open} |
|||
aria-haspopup="listbox" |
|||
on:click={() => (open = true)}> |
|||
<span class="spectrum-Picker-label" class:is-placeholder={isNull}> |
|||
{isNull ? placeholderText : $fieldState.value} |
|||
</span> |
|||
{#if !$fieldState.valid} |
|||
<svg |
|||
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
aria-label="Folder"> |
|||
<use xlink:href="#spectrum-icon-18-Alert" /> |
|||
</svg> |
|||
{/if} |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" |
|||
focusable="false" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-Chevron100" /> |
|||
</svg> |
|||
</button> |
|||
<div |
|||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover" |
|||
class:is-open={open}> |
|||
<ul class="spectrum-Menu" role="listbox"> |
|||
<li |
|||
class="spectrum-Menu-item" |
|||
class:is-selected={isNull} |
|||
role="option" |
|||
aria-selected="true" |
|||
tabindex="0" |
|||
on:click={() => selectOption(null)}> |
|||
<span class="spectrum-Menu-itemLabel">{placeholderText}</span> |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" |
|||
focusable="false" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
|||
</svg> |
|||
</li> |
|||
{#each options as option} |
|||
<li |
|||
class="spectrum-Menu-item" |
|||
class:is-selected={option === $fieldState.value} |
|||
role="option" |
|||
aria-selected="true" |
|||
tabindex="0" |
|||
on:click={() => selectOption(option)}> |
|||
<span class="spectrum-Menu-itemLabel">{option}</span> |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" |
|||
focusable="false" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
|||
</svg> |
|||
</li> |
|||
{/each} |
|||
</ul> |
|||
</div> |
|||
{#if $fieldState.error} |
|||
<div class="error">{$fieldState.error}</div> |
|||
{/if} |
|||
</SpectrumField> |
|||
|
|||
<style> |
|||
.error { |
|||
color: var( |
|||
--spectrum-semantic-negative-color-default, |
|||
var(--spectrum-global-color-red-500) |
|||
) !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,36 @@ |
|||
<script> |
|||
import Placeholder from "./Placeholder.svelte" |
|||
import { getContext } from "svelte" |
|||
|
|||
export let label |
|||
export let field |
|||
|
|||
const formContext = getContext("form") |
|||
const { styleable } = getContext("sdk") |
|||
const component = getContext("component") |
|||
const { labelPosition, formApi } = formContext || {} |
|||
const formField = formApi?.registerField(field) ?? {} |
|||
const { fieldId } = formField |
|||
|
|||
$: labelPositionClass = |
|||
labelPosition === "top" ? "" : `spectrum-FieldLabel--${labelPosition}` |
|||
</script> |
|||
|
|||
{#if !fieldId} |
|||
<Placeholder>Add the Field setting to start using your component</Placeholder> |
|||
{:else if !formContext} |
|||
<Placeholder>Form components need to be wrapped in a Form</Placeholder> |
|||
{:else} |
|||
<div class="spectrum-Form-item" use:styleable={$component.styles}> |
|||
{#if label} |
|||
<label |
|||
for={fieldId} |
|||
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}> |
|||
{label} |
|||
</label> |
|||
{/if} |
|||
<div class="spectrum-Form-itemField"> |
|||
<slot /> |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
Loading…
Reference in new issue