Selective Editor

Experimental.

Selective editor for providing a rich UI for editing structured data.

See the typescript docs or example.

Usage

Styles

For an out-of-box experience you can instead use the styling used by the example.

@import "selective-edit/sass/selective"

If you desire full control over the styling there are a few basic style rules that the selective editor requires in order to function correctly.

They are available in the /sass/selective-core.sass file.

@import "selective-edit/sass/selective-core"

Javascript

See the example and example source to see how to create a selective editor with an assortment of fields and validation rules.

Field types

The selective editor comes with several standard field types which can be used directly or extended and customized. Custom field types can also be designed and used with the selective editor.

Custom field types can extend one of the existing field types, the base Field, or follow the FieldComponent interface.

Selective edit uses the html-lit library to handle the UI of the editor.

Validation rule types

Every field can be validated. Selective edit comes with some basic rules (length, matching, pattern matching, range, required), but projects can also define their own validation rules. Follow the RuleComponent interface to create a custom rule or extend one of the existing rules to improve it for your needs.

Field config

The editor uses field configurations to control what to display in the editor.

// Add a field for the editor to display.
selective.fields.addField({
  type: "text",
  key: "title",
  label: "Title",
  help: "Title for the data.",
})

Different field types have different configurations options:

• Checkbox
• CheckboxMulti
• Color
• Date
• Datetime
• Group
• List
• Number
• Radio
• Text
• Textarea
• Time
• Variant