From 9791e52a10e57f4fa3c00340cd962754598a8626 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 28 Jan 2021 16:31:55 +0000 Subject: [PATCH] Add boolean field, fix label alignment, fix picker z index --- .../design/AppPreview/componentStructure.json | 1 + .../BooleanFieldSelect.svelte | 5 ++ .../PropertiesPanel/SettingsView.svelte | 2 + packages/client/src/store/binding.js | 2 +- packages/standard-components/manifest.json | 27 ++++++++-- packages/standard-components/package.json | 1 + .../standard-components/src/DatePicker.svelte | 2 +- packages/standard-components/src/Input.svelte | 2 +- .../src/forms/BooleanField.svelte | 50 +++++++++++++++++++ .../standard-components/src/forms/Form.svelte | 11 ++-- .../src/forms/OptionsField.svelte | 3 +- .../src/forms/SpectrumField.svelte | 14 +++--- .../standard-components/src/forms/index.js | 1 + packages/standard-components/yarn.lock | 5 ++ 14 files changed, 103 insertions(+), 23 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte create mode 100644 packages/standard-components/src/forms/BooleanField.svelte diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 98f2ca1aa0..9c34c20a14 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -12,6 +12,7 @@ "stringfield", "numberfield", "optionsfield", + "booleanfield", "richtext", "datepicker" ] diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte new file mode 100644 index 0000000000..51b459bf23 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index 3709e9da66..74d7837b14 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -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 => { diff --git a/packages/client/src/store/binding.js b/packages/client/src/store/binding.js index b279142c32..e9ab28831d 100644 --- a/packages/client/src/store/binding.js +++ b/packages/client/src/store/binding.js @@ -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 diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index ce628ee775..09af829621 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -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" + } + ] } } diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 30d2c35346..678e772c0f 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -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", diff --git a/packages/standard-components/src/DatePicker.svelte b/packages/standard-components/src/DatePicker.svelte index 77b98b670b..200a563516 100644 --- a/packages/standard-components/src/DatePicker.svelte +++ b/packages/standard-components/src/DatePicker.svelte @@ -8,7 +8,7 @@ export let placeholder let value - $: setBindableValue(value, $component.id) + $: setBindableValue($component.id, value) function handleChange(event) { const [fullDate] = event.detail diff --git a/packages/standard-components/src/Input.svelte b/packages/standard-components/src/Input.svelte index 18a8880529..03dd6ea023 100644 --- a/packages/standard-components/src/Input.svelte +++ b/packages/standard-components/src/Input.svelte @@ -7,7 +7,7 @@ let value function onBlur() { - setBindableValue(value, $component.id) + setBindableValue($component.id, value) } diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte new file mode 100644 index 0000000000..4292eedcbe --- /dev/null +++ b/packages/standard-components/src/forms/BooleanField.svelte @@ -0,0 +1,50 @@ + + + + {#if fieldState} +
+ +
+ {/if} + diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte index 268b3f8aed..48684f4cfd 100644 --- a/packages/standard-components/src/forms/Form.svelte +++ b/packages/standard-components/src/forms/Form.svelte @@ -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 diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index bdfb1664cc..6ff204b175 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -54,7 +54,8 @@
+ class:is-open={open} + style="z-index: 1;">
  • - {#if label} - - {/if} +
    {#if $fieldState.error} diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js index 166bd6cd72..52b7386005 100644 --- a/packages/standard-components/src/forms/index.js +++ b/packages/standard-components/src/forms/index.js @@ -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" diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock index a1a4a11af5..4002f824cc 100644 --- a/packages/standard-components/yarn.lock +++ b/packages/standard-components/yarn.lock @@ -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"