svelte-formula - npm Package Versions

[0.8.3] - 2021-02-22

Fixed

• Example in readme fixed with link to demo on Svelte Repl

[0.8.2] - 2021-02-22

Added

• update method on groups, takes a FormulaOptions object and applies it to all forms in the group

• Formula and Beaker now set ARIA properties for some form and field states

  • Form, Group and Row are applied to containers
  • Sets radio elements and attempts to discover the radiogroup root element
  • Set properties like required and checked for value types and attributes

Changed

• Performance improvements and some internal refactoring
• Documentation improvements

[0.8.1] - 2021-02-21

Added

• Added clear method to beaker - this will empty the store of any group data
• Group forms now available on forms property

Fixed

• Fixed reset method of group, now correctly calls reset on the forms
• Fixed lifecycle issues with group

[0.8.0] - 2021-02-21

Added

• New beaker API that provides functionality for working with groups of data as multi-line forms. See documentation for more details on use

  import { beaker } from 'svelte-formula'
  const contacts = beaker();
  
  export let loadedContacts = [];
  
  const contactValues = contacts.formValues;
  contacts.init(loadedContacts) // Set initial values
  
  // Easily add items to the group
  function addRow(item) {
    contacts.add({...item});
  }
  //... or remove them
  function removeRow(index) {
    contacts.delete(index);
  }
  
  ....
  <div use:contacts.group>
  {#each $contactValues as contact, i}
    <!-- Template for each row -->
  {/each}
  </div>
  

Fixed

• Some internal API fixes and refactoring

[0.7.2] 2021-02-19

Fixed

• Fixed single checkbox not setting correctly

[0.7.1] 2021-02-19

Fixed

• Correctly rebind touch and dirty handlers after resetting
• Remove stray console.log

[0.7.0] 2021-02-19

Added

• defaultValues option that allows default values to be set on fields - supports single and multi-value properties - these values are only applied if there is no value already bound to the field.

  <script>
    import {formula} from 'svelte-formula';
    const { form } = formula({
      defaultValues: {
        textField: 'Initial Value',
        numberField: 42,
        checkBox: true,
        multiValue: ['option1', 'option3']
      }
    })
  </script>
  

• Added isFormReady store - Formula stores are created immediately when using the formula method, previously they were always empty objects filled with keys from parsing the form. This meant early binding would cause an error and forced the use of ?. operators in the templates. This store can now be used as {#if $isFormReady}, reducing the need for the number of conditionals in templates

• initialValues store that contains the values at form initialisation, this is generated from merging any initial element values merged with any potential default values

• formReset function that when called will reset the form to the pristine state at setup time

[0.6.0] 2021-02-18

Added

• Formula now returns an updateForm method that takes an updated FormulaOptions object - this function destroys all existing handlers on the forms and rebinds them with the new options - this allows for dynamically adding and removing of validations and messages

    <script>
    import { formula } from 'svelte-formula';
  
    const formValidators = {
      passwordsMatch: (values) => values.password === values.passwordMatch ? null : 'Your passwords do not match',
    };
  
    const { form, updateForm } = formula({
      formValidators,
    });
  
    function addDomainValidation() {
      const options = {
        formValidators,
        validators: {
          username: {
            inDomain: (value) => value.includes('@svete.codes') ? null : 'You in the svelte codes?',
          },
        },
      };
      updateForm(options);
    }
  
    function removeDomainValidation() {
      updateForm({ formValidators });
    }
    </script>
  

• Formula now returns a destoryForm method that allows the form to be destroyed early - when using the use directive this is called automatically on component destroy, but this allows for early form unbinding.

• New enrich option added to FormulaOptions and a new enrichment store. Enrichment allow methods to be added to fields to return computed values (e.g. password score) that can be used to drive other parts of the UI

    <script>
      import { formula } from 'svelte-formula';
      import {passwordScore} from '../libs/password'
      const { form, enrichment } = formula({
        enrich: {
          password: {
            passwordStrength: (value) => passwordScore(value)
          }
        }
      })
    </script>
  
  <label for='password'>Password</label>
  <input type='password' id='password' name='password' />
  <meter value={$enrichment?.password?.passwordStrength || 0} min='0' max='100' low='33' high='66' optimum='80' />
  

• New globalStore Map object - if Formula is used with an element with an id property, the instances stores will be added to the global store and can be accessed via globalStore.get(name) - allowing sharing of data across multiple forms.

[0.5.1] 2021-02-17

Fixed

• Correct URL for docs site: https://tanepiper.github.io/svelte-formula