stubber-form-fields-pkg

1.1.9 • Public • Published

stubber-form-fields-pkg

Quick start

Use this as a quick demo

<script>
  import { Form } from  'stubber-form-fields-pkg';

  let initial_form = {
    spec: {
      fields: {
        fullname: {
          fieldtype: "text"
        },
        gender: {
          fieldtype: "select",
          params: {
            options: [
              {
                label: "Male",
                value: "male"
              },
              {
                label: "Female",
                value: "female"
              }
            ]
          }
        }
      }
    }
  }

  let form;

</script>

<Form
  bind:form
  {initial_form}
/>

Form

  • Can render a list of fields
  • All fields in a form have access to the state and data of other fields in the form
  • initial_form can be passed as a prop to this component to initialize the stores with some data
  • All props from this component are passed down to child components

props

initial_form

  • Use to initialize the form
{
  "spec": {
    "test": {
      "fieldtype": "text"
    }
  },
  "data": {
    "test": "Hi there"
  }
}

form

  • use this to bind to the internal store

field_wrapper

  • Use to render fields differently
  • Below is the default wrapper as a guideline
<script>
	// fieldWrapper
	export let fieldcomponent;
</script>

<svelte:component this={fieldcomponent} {...$$props} />

dependencies

  • Many fields require extra dependencies that you can pass via this prop

Concepts

There are a few concepts to be aware of when using this library

Field definition

This is the JSON object, primarily as it comes from the template

common settings

  • name
    • always gets set to the key of the object and cannot be overwritten
  • fieldtype
    • sets the field component to render in the form
    • default value is'text'
  • description
    • use to describe what the field is there for
    • default value is''
  • title
    • use to set the label of the field
    • default value is a human readable form of [name]
  • hide_label
    • set to true if you don't want the field to show a label
    • default value isfalse
  • details.keyname
    • use to set where in data to write the field value to
    • default value is [name]
  • details.datapath
    • use to nest the value deeper inside data
    • default value is ''
  • initvalue.default
    • use to set the value of the field if the field value is not yet set
  • initvalue.override
    • use to set the value of the field regardless of if the field value is set or not
  • conditions
    • use to conditionally render a field
    • array of jsonata expressions that evaluate using the fieldContext
    • default value is []
// example conditions
[
  "form.data.gender = 'male'"
]
  • validations
    • use to ensure a valid field value
    • default value is {}
// example validations
{
  "is_required_validation": {
    "validationtype": "required",
    "valid_message": "Looks good!",
    "invalid_message": "This field is required"
  },
  "passes_regex_check": {
    "validationtype": "regex",
    "params": {
      "regex": "regex here"
    },
    "invalid_message": "something is wrong"
  },
  "jsonata_check": {
    "validationtype": "jsonata",
    "params": {
      "jsonata": "field.data = 5"
    },
    "invalid_message": "something is wrong"
  }
}
  • fields
    • Nest multiple fields under this field
  • params is where any field-specific settings are set

fieldtypes

arraybuilder

  • params.new_entry_field
    • this is a fieldspec for how new entries are added to the array
    • details.keyname and details.datapath don't function in the new_entry_field

checkbox

  • params.checkedvalue
    • this is the value that the field will be set to if the box is checked
    • default value is true
  • params.uncheckedvalue
    • this is the value that the field will be set to if the box is not checked
    • default value is false

currency

  • params.currency
    • set the currency of the field
  • params.currency_whitelist
    • set array of currencies that can be selected
  • params.currency_blacklist
    • set array of currencies that cannot be selected

dataindication

date

datetime

file

hidden

jsoneditor

  • params.readonly
    • Shows a non-editable jsoneditor

map

multistep

note

radio

  • params.options
    • set the options here
[
  {
    "label": "Red"
  },
  {
    "label": "Green",
    "value": "green"
  },
  {
    "label": "Blue",
    "value": {
      "hello": "world"
    }
  }
]

renderfield

  • params.dynamic_fieldspec
    • Set the fieldspec here with values as jsonata expressions

richtext

scrollandreaddisplay

  • params.displaytext
    • Set the text that should be displayed and scrolled through

section

select

  • params.options
    • set the select options here
[
  {
    "label": "Red"
  },
  {
    "label": "Green",
    "value": "green"
  },
  {
    "label": "Blue",
    "value": {
      "hello": "world"
    }
  }
]

signature

telephone

text

Dependencies

The dependencies prop is used by certain fields that only function with third party services. All the optional dependencies are listed below.

  • file.upload_url
    • Where files should be uploaded to (e.g. /api/file-server/upload)
  • map.mapboxAccessToken
    • Access token for mapbox account
  • map.mapboxStylesheetUrl
    • Stylesheet url for maps

Publishing

  • npm version patch to bump the version
  • git push origin master to push the bumped version
  • npm run build to build the package
  • npm run package to package the package
  • npm publish to publish the package

Package Sidebar

Install

npm i stubber-form-fields-pkg

Weekly Downloads

22

Version

1.1.9

License

MIT

Unpacked Size

279 kB

Total Files

146

Last publish

Collaborators

  • ivanstubber
  • hansies
  • vincent_stubber.com