Add boolean field, fix label alignment, fix picker z index

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -12,6 +12,7 @@
       "stringfield",
       "numberfield",
       "optionsfield",
+      "booleanfield",
       "richtext",
       "datepicker"
     ]

packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte

@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="boolean" />

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 => {

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

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"
+      }
+    ]
   }
 }

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",

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

packages/standard-components/src/Input.svelte

@@ -7,7 +7,7 @@
   let value
 
   function onBlur() {
-    setBindableValue(value, $component.id)
+    setBindableValue($component.id, value)
   }
 </script>
 

packages/standard-components/src/forms/BooleanField.svelte

@@ -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>

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

packages/standard-components/src/forms/OptionsField.svelte

@@ -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"

packages/standard-components/src/forms/SpectrumField.svelte

@@ -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
-        <label
+        for={$fieldState.fieldId}
-          for={$fieldState.fieldId}
+        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-          class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+        {label || ''}
-          {label}
+      </label>
-        </label>
-      {/if}
       <div class="spectrum-Form-itemField">
         <slot />
         {#if $fieldState.error}

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"

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"