README

[WIP] Multi Editor

Simple Form Manager for UI-Frameworks

⏰ Short Example

// Let's create our MultiEditor
const multiEditor = new MultiEditor(editor => ({
  data: {
    id: "myId", // Inital Id
    email: undefined, // Inital Email
    name: undefined, // Inital Name
  },
  onSubmit: async (data) => {
    console.log("Submitted ", data);  // <-------------------------------------------    
  },                                                                  //            |
  fixedProperties: ["id"], // Properties that always get passed as data into the onSubmit function
  validateMethods: {
    email: editor.Validator().string().email().required(), // Email is requiered, a string and follows the Email regex
    name: editor.Validator().string().max(10).min(2).required(), // Name is required, a string, has to be shorter than 10 and longer than 2 chars
  },
  editableProperties: ["email", "name"], // Properties that can be edited
}));

// Lets update the requiered properties to validate the Editor
multiEditor.setValue("email", "test@test.com");
multiEditor.setValue("name", "Jeff");

// Now we can submit the Editor and see what the onSubmit will log
multiEditor.submit();
// Submited {
//   id: "myId",
//   name: "Jeff",
//   email: "test@test.com"
// }

Do you want to see it in action? Click here.

❓ Why Agile MultiEditor

🚅 Straightforward

Write minimalistic, boilerplate free code that captures your intent.
For instance

Simple Validation

// Email is requiered, a string and follows the Email regex
EDITOR.Validator().string().email().required()

Compute Value

// Force Name to be lowercase
name: (value) => {
      return value.toLowerCase();
    }

🎯 Easy to Use

Learn the powerful and simple tools of Agile MultiEditor in a short amount of time.

🍃 Lightweight

Agile Api has an unpacked size of 14.1kB and 0 external dependencies.

⬇️ Installation

npm install @agile-ts/multieditor

The multieditor package is an extension of AgileTs and doesn't work without the core package, which functions as the brain of AgileTs and is indispensable. Unfortunately, we can't combine each core with multieditor version. Therefore, we have created a table which shows which versions fit together without restrictions.

@agile-ts/multieditor	@agile-ts/core	NPM Version
v0.0.7+	v0.0.7+	v6+
v0.0.6	v0.0.3 - v0.0.6	v6+
Other Versions aren't supported anymore

📄 Documentation

The Agile MultiEditor Docs are located here

Usage no npm install needed!