@agile-ts/multieditor

Simple Form Manager for UI-Frameworks

Usage no npm install needed!

<script type="module">
  import agileTsMultieditor from 'https://cdn.skypack.dev/@agile-ts/multieditor';
</script>

README

[WIP] Multi Editor

Simple Form Manager for UI-Frameworks

npm version GitHub License npm monthly downloads npm total downloads npm minified size

⏰ 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

Be aware that this is no standalone package!
To use the Agile MultiEditor you have to install the Agile Core.
To find out more take a look into the docs.

🔑 Fitting Versions

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

📄 Documentation

The Agile Api Docs are located here