# HAPI Form Plugin
Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint.
## CDN
```html
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script>
```

## Usage
```html
<script>
Hapi.form({
    name: "",
    endpoint: "",
    redirectTo: "",
    fileUpload: {
        filepond: filepondObject,
        el: '#files'
    },
    onSuccess(res) {},
    onFailed(err) {}
});
</script>
```

- name – The name of the instance, to be matched with `x-data="name"`.
- endpoint – The form endpoint URL generated from the backend.
- redirectTo – Location to be redirected after success. Eg: "/thank-you" or "https://example.com". (Optional)
- fileUpload
  - filepond – Filepond object. (Filepond plugin required)
  - el – Select `input` element if you're using normal upload.
- onSuccess() – On success event.
- onFailed() – On failed event.

## Array data
```js
Hapi.form({
    fields: {
      colors; [] // Example an empty array of colors
    },
    name: "",
    endpoint: "",
});
```

## Alpine.js data
Sometimes you might need to set data for Alpine.js, I got your back.
```js
Hapi.form({
    ...
    open: false,
});
```
## Events

### Success Event
When submission is success, Hapi will emit `hapi:success` event.


### Error Event
When submission has error, Hapi will emit `hapi:error` event.

Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint. ## CDN ```html <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> <script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script> ```

@juno0424/hapi

juno0424

## Usage ```js Hapi.form({ name: "", endpoint: "", redirectTo: "", fileupload: { filepond: filepondObject, el: '#files' }, onSuccess(res) {}, onFailed(err) {} }); ```

## CDN ```html <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> <script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script> ```