Add boolean field, fix label alignment, fix picker z index
This commit is contained in:
Andrew Kingston
parent
c84ff0589a
commit
9791e52a10
|
|
@ -12,6 +12,7 @@
|
|||
"stringfield",
|
||||
"numberfield",
|
||||
"optionsfield",
|
||||
"booleanfield",
|
||||
"richtext",
|
||||
"datepicker"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import FormFieldSelect from "./FormFieldSelect.svelte"
|
||||
</script>
|
||||
|
||||
<FormFieldSelect {...$$props} type="boolean" />
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
|
||||
import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
|
||||
import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
|
||||
import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
|
||||
|
||||
export let componentDefinition = {}
|
||||
export let componentInstance = {}
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
"field/string": StringFieldSelect,
|
||||
"field/number": NumberFieldSelect,
|
||||
"field/options": OptionsFieldSelect,
|
||||
"field/boolean": BooleanFieldSelect,
|
||||
}
|
||||
|
||||
const getControl = type => {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { writable } from "svelte/store"
|
|||
const createBindingStore = () => {
|
||||
const store = writable({})
|
||||
|
||||
const setBindableValue = (value, componentId) => {
|
||||
const setBindableValue = (componentId, value) => {
|
||||
store.update(state => {
|
||||
if (componentId) {
|
||||
state[componentId] = value
|
||||
|
|
|
|||
|
|
@ -1123,7 +1123,6 @@
|
|||
},
|
||||
"fieldgroup": {
|
||||
"name": "Field Group",
|
||||
"description": "A group of fields in a form.",
|
||||
"icon": "ri-edit-box-line",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
|
|
@ -1152,7 +1151,6 @@
|
|||
},
|
||||
"stringfield": {
|
||||
"name": "Text Field",
|
||||
"description": "A textfield component that allows the user to input text.",
|
||||
"icon": "ri-edit-box-line",
|
||||
"styleable": true,
|
||||
"bindable": true,
|
||||
|
|
@ -1176,7 +1174,6 @@
|
|||
},
|
||||
"numberfield": {
|
||||
"name": "Number Field",
|
||||
"description": "A textfield component that allows the user to input numbers.",
|
||||
"icon": "ri-edit-box-line",
|
||||
"styleable": true,
|
||||
"bindable": true,
|
||||
|
|
@ -1200,7 +1197,6 @@
|
|||
},
|
||||
"optionsfield": {
|
||||
"name": "Options Picker",
|
||||
"description": "A textfield component that allows the user to input text.",
|
||||
"icon": "ri-edit-box-line",
|
||||
"styleable": true,
|
||||
"bindable": true,
|
||||
|
|
@ -1222,5 +1218,28 @@
|
|||
"placeholder": "Choose an option"
|
||||
}
|
||||
]
|
||||
},
|
||||
"booleanfield": {
|
||||
"name": "Checkbox",
|
||||
"icon": "ri-edit-box-line",
|
||||
"styleable": true,
|
||||
"bindable": true,
|
||||
"settings": [
|
||||
{
|
||||
"type": "field/boolean",
|
||||
"label": "Field",
|
||||
"key": "field"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Label",
|
||||
"key": "label"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Text",
|
||||
"key": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
"@budibase/svelte-ag-grid": "^0.0.16",
|
||||
"@spectrum-css/actionbutton": "^1.0.0-beta.1",
|
||||
"@spectrum-css/button": "^3.0.0-beta.6",
|
||||
"@spectrum-css/checkbox": "^3.0.0-beta.6",
|
||||
"@spectrum-css/fieldlabel": "^3.0.0-beta.7",
|
||||
"@spectrum-css/icon": "^3.0.0-beta.2",
|
||||
"@spectrum-css/menu": "^3.0.0-beta.5",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
export let placeholder
|
||||
|
||||
let value
|
||||
$: setBindableValue(value, $component.id)
|
||||
$: setBindableValue($component.id, value)
|
||||
|
||||
function handleChange(event) {
|
||||
const [fullDate] = event.detail
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
let value
|
||||
|
||||
function onBlur() {
|
||||
setBindableValue(value, $component.id)
|
||||
setBindableValue($component.id, value)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
50
packages/standard-components/src/forms/BooleanField.svelte
Normal file
50
packages/standard-components/src/forms/BooleanField.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import "@spectrum-css/checkbox/dist/index-vars.css"
|
||||
import SpectrumField from "./SpectrumField.svelte"
|
||||
|
||||
export let field
|
||||
export let label
|
||||
export let text
|
||||
|
||||
let fieldState
|
||||
let fieldApi
|
||||
|
||||
const onChange = event => {
|
||||
fieldApi.setValue(event.target.checked)
|
||||
}
|
||||
|
||||
// Ensure a valid boolean value is set
|
||||
onMount(() => {
|
||||
fieldApi.setValue($fieldState.value || false)
|
||||
})
|
||||
</script>
|
||||
|
||||
<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
|
||||
{#if fieldState}
|
||||
<div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
|
||||
<label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
|
||||
<input
|
||||
on:change={onChange}
|
||||
type="checkbox"
|
||||
class="spectrum-Checkbox-input"
|
||||
id={$fieldState.fieldId} />
|
||||
<span class="spectrum-Checkbox-box">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark"
|
||||
focusable="false"
|
||||
aria-hidden="true">
|
||||
<use xlink:href="#spectrum-css-icon-Checkmark75" />
|
||||
</svg>
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark"
|
||||
focusable="false"
|
||||
aria-hidden="true">
|
||||
<use xlink:href="#spectrum-css-icon-Dash75" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="spectrum-Checkbox-label">{text || 'Checkbox'}</span>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
</SpectrumField>
|
||||
|
|
@ -16,15 +16,14 @@
|
|||
let table
|
||||
let fieldMap = {}
|
||||
|
||||
// Keep form state up to date with form fields
|
||||
$: updateFormState(fieldMap)
|
||||
|
||||
// Form state contains observable data about the form
|
||||
const formState = writable({ values: {}, errors: {}, valid: true })
|
||||
$: updateFormState(fieldMap)
|
||||
$: setBindableValue($component.id, $formState.values)
|
||||
|
||||
// Form API contains functions to control the form
|
||||
const formApi = {
|
||||
registerField: (field, componentId) => {
|
||||
registerField: field => {
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
|
|
@ -38,7 +37,7 @@
|
|||
|
||||
fieldMap[field] = {
|
||||
fieldState: makeFieldState(field),
|
||||
fieldApi: makeFieldApi(field, componentId, validate),
|
||||
fieldApi: makeFieldApi(field, validate),
|
||||
fieldSchema: schema?.[field] ?? {},
|
||||
}
|
||||
fieldMap = fieldMap
|
||||
|
|
@ -53,8 +52,6 @@
|
|||
const makeFieldApi = (field, componentId, validate) => {
|
||||
return {
|
||||
setValue: value => {
|
||||
console.log("setting " + componentId + " to " + value)
|
||||
setBindableValue(value, componentId)
|
||||
const { fieldState } = fieldMap[field]
|
||||
fieldState.update(state => {
|
||||
state.value = value
|
||||
|
|
|
|||
|
|
@ -54,7 +54,8 @@
|
|||
</button>
|
||||
<div
|
||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover"
|
||||
class:is-open={open}>
|
||||
class:is-open={open}
|
||||
style="z-index: 1;">
|
||||
<ul class="spectrum-Menu" role="listbox">
|
||||
<li
|
||||
class="spectrum-Menu-item"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
// Register field with form
|
||||
const { formApi } = formContext || {}
|
||||
const labelPosition = fieldGroupContext?.labelPosition || "above"
|
||||
const formField = formApi?.registerField(field, $component.id)
|
||||
const formField = formApi?.registerField(field)
|
||||
|
||||
// Expose field properties to parent component
|
||||
fieldState = formField?.fieldState
|
||||
|
|
@ -37,13 +37,11 @@
|
|||
{:else}
|
||||
<FieldGroupFallback>
|
||||
<div class="spectrum-Form-item" use:styleable={$component.styles}>
|
||||
{#if label}
|
||||
<label
|
||||
for={$fieldState.fieldId}
|
||||
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
|
||||
{label}
|
||||
</label>
|
||||
{/if}
|
||||
<label
|
||||
for={$fieldState.fieldId}
|
||||
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
|
||||
{label || ''}
|
||||
</label>
|
||||
<div class="spectrum-Form-itemField">
|
||||
<slot />
|
||||
{#if $fieldState.error}
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@ export { default as fieldgroup } from "./FieldGroup.svelte"
|
|||
export { default as stringfield } from "./StringField.svelte"
|
||||
export { default as numberfield } from "./NumberField.svelte"
|
||||
export { default as optionsfield } from "./OptionsField.svelte"
|
||||
export { default as booleanfield } from "./BooleanField.svelte"
|
||||
|
|
|
|||
|
|
@ -142,6 +142,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
|
||||
integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
|
||||
|
||||
"@spectrum-css/checkbox@^3.0.0-beta.6":
|
||||
version "3.0.0-beta.6"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374"
|
||||
integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ==
|
||||
|
||||
"@spectrum-css/fieldlabel@^3.0.0-beta.7":
|
||||
version "3.0.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114"
|
||||
|
|
|
|||
Loading…
Reference in a new issue