@getmeli/sdk

v1.0.0

Published

2 years ago

Meli SDK

Downloads

0High
0Medium
0Low

charliebravo

meli sdk

Meli SDK

Forms

Using

Place a .meli.yml at your site root:

forms:
    form1:
        type: email
        recipient: [email protected]

Create an HTML form:

<!doctype html>
<html>
<head>
    <!-- ... other scripts -->
    <script async src="https://unpkg.com/@getmeli/sdk@^1/build/browser.js"></script>
</head>
<body>

<form data-form="form1" id="my-form">
    <input type="text" name="name">
    <input type="file" name="logo">
    <button type="submit">Submit</button>
</form>

<script>
    const formElement = document.getElementById('my-form');
    formElement.addEventListener('submitted', () => {
        console.log('submitted');
    });
</script>

</body>
</html>

By default, the lib will automatically load and look for forms with the data-form attribute. You can disable this by:

adding the data-meli-init="false" to your script tag
removing the async directive from your script tag


<script ... data-meli-init="false"></script>
<script>
    Meli.Forms.init().catch(console.error);
</script>

Using Npm

Install the lib:

npm i @getmeli/sdk

Use it in your code:

import Meli from 'meli';

Meli.Forms.init().catch(console.error);

Api

To pass your own forms:

const form = document.getElementById('my-form');

Meli.Forms
    .init([form])
    .catch(console.error);

Manually create a form and bind it:

Meli.Forms
    .init([]) // passing the empty array cancels the auto detection
    .then(() => {
        const formElement = document.getElementById('my-form');
        const form = new Meli.Forms.Form(form);
    })
    .catch(console.error);

To remove all listeners:

// ...
const form = new Meli.Forms.Form(form);
forms.remove();

Events

On the HTML form element:

const formElement = document.getElementById('my-form');
formElement.addEventListener('submitted', () => {
    console.log('submitted');
});

Or on the Form object:

Meli.Forms
    .init([])
    .then(() => {
        const formElement = document.getElementById('my-form');
        const form = new Meli.Forms.Form(form);
        form.addEventListener('submitted', () => {
            console.log('submitted');
        });
    })
    .catch(console.error);

| Event | Callback signature | Description | |----|----|----| | submitting | () => void | The form submit callback was called. | | submitted | () => void | The form was submitted successfully. | | error | (error) => void | Something went wrong. |

Development

Run Meli locally
Ship a site with a form
Run npx http-server -p 3030 .
In your site's index.html, use http://localhost:3030/build/browser.js for the SDK src
Start the build npm i && npm start

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Meli SDK

Forms

Using

Using Npm

Api

Events

Development